/* Report forms: builds on /lspd-tools/assets/theme.css */

.form-panel .field-grid { margin-top: 16px; }
.field-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field.span-all { grid-column: 1 / -1; }

.field .label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.field .label-row label { margin: 0; }
.field .hint { margin-top: 6px; font-size: .75rem; color: var(--muted-foreground); }

/* Single checkbox field (e.g. Olay Türü). ".checkbox-field .checkbox-label" (not just
   ".checkbox-label") is needed to outrank theme.css's ".field label { display: block; ... }". */
.checkbox-field { display: flex; align-items: center; min-height: 34px; }
.checkbox-field .checkbox-label {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; cursor: pointer;
  font-size: .875rem; line-height: 1.3;
}
.checkbox-input {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0; flex: none;
  border: 1.5px solid var(--input);
  border-radius: 5px;
  background-color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.checkbox-label:hover .checkbox-input { border-color: var(--primary); }
.checkbox-input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.checkbox-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Evet/Hayır switch (e.g. Inmate Check). */
.toggle-switch {
  display: inline-flex; align-items: center; gap: 8px;
  width: 118px; height: 40px; padding: 4px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--destructive);
  transition: background .15s ease;
}
.toggle-switch.on { background: var(--success); flex-direction: row-reverse; }
.toggle-knob {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--destructive);
}
.toggle-switch.on .toggle-knob { color: var(--success); }
.toggle-knob svg { width: 16px; height: 16px; }
.toggle-text { flex: 1; text-align: center; color: #fff; font-weight: 600; font-size: .875rem; }

/* section.dualColumn: two independently-stacked columns (see form-engine.js). */
.dual-column-wrap { display: flex; gap: 24px; margin-top: 16px; }
.dual-column-wrap > .field-grid.dual-column { flex: 1; grid-template-columns: 1fr; margin-top: 0; }

/* Panel with an external title: the h2 sits above the bordered box (not as its first line), and
   this block's own margin gives consistent, reasonable breathing room to the next boxed section —
   used for every section/group panel the engine builds. */
.section-block { margin-bottom: 28px; }
.section-block:last-child { margin-bottom: 0; }
.section-block > .panel { margin-bottom: 0; }
.section-title { margin: 0 0 14px 2px; font-size: 1.25rem; font-weight: 600; color: var(--foreground); }

/* A small "remove" icon-button that only appears when hovering the row/card it belongs to (or
   while it has keyboard focus) — never permanently visible. */
.corner-remove-btn, .group-inline-remove-btn {
  opacity: 0; transition: opacity .15s;
}
.corner-remove-btn:focus-visible, .group-inline-remove-btn:focus-visible { opacity: 1; }

/* Repeatable field group, "panels" layout: each instance is its own titled top-level panel, with a
   small hover-revealed remove button in its corner. */
.group-section { display: flex; flex-direction: column; }
.group-section .section-block { margin-bottom: 20px; }
.form-panel { position: relative; }
/* Child combinator: only a remove button that's a direct child of the hovered panel — i.e. the
   "panels" layout, one instance per panel — reacts here; "cards" layout's buttons (nested one level
   deeper, inside .group-card) are handled by the ".group-card:hover" rule below instead, so hovering
   one card in a shared outer panel doesn't also reveal every other card's button. */
.form-panel:hover > .corner-remove-btn { opacity: 1; }
.form-actions.group-add { justify-content: flex-start; margin-top: 20px; }

/* Repeatable field group, "inline" layout (e.g. Kanıtlar): every instance's fields sit directly in
   the shared panel's grid, each pair wrapped in its own row so hovering it reveals its remove
   button; the add button is the grid's last (span-all) row. */
.field.group-add-inline { display: flex; margin-top: 8px; }
.field.group-add-inline .btn { align-self: flex-start; }
.field.group-inline-item { position: relative; padding-right: 44px; }
.field.group-inline-item .field-grid { margin-top: 0; }
.group-inline-remove-btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.field.group-inline-item:hover .group-inline-remove-btn { opacity: 1; }

/* Repeatable field group, "cards" layout (e.g. İlgili Kişi): one outer titled panel holding a
   nested, individually-bordered card per instance, each with a corner "remove" button — instead of
   a whole separate top-level panel per instance. */
.group-cards { display: flex; flex-direction: column; gap: 16px; }
.group-card {
  position: relative;
  padding: 20px; padding-right: 52px;
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.group-card .field-grid { margin-top: 0; }
.group-card:hover .corner-remove-btn { opacity: 1; }
.corner-remove-btn { position: absolute; top: 14px; right: 14px; }

/* Required fields */
.req { margin-left: 3px; color: hsl(38 92% 50%); }
.field.invalid .input, .field.invalid .select-trigger {
  border-color: hsl(38 92% 50%);
  box-shadow: 0 0 0 3px hsl(38 92% 50% / .18);
}
.error-msg { margin-top: 6px; font-size: .75rem; color: hsl(38 92% 50%); }
.error-msg::before { content: "⚠ "; }

/* Fields without a leading icon */
.input.plain, .select.plain .select-trigger { padding-left: 12px; }
textarea.input { height: auto; min-height: 140px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
input.input[type="date"], input.input[type="time"] { cursor: text; }
input.input[type="date"]::-webkit-calendar-picker-indicator,
input.input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }

/* type="search" is used instead of "text" on free-typed fields to opt out of the browser's
   personal-info (name/address) autofill; strip the browser's own search-box chrome so it still
   looks like a plain text field. */
input.input[type="search"] { -webkit-appearance: none; appearance: none; }
input.input[type="search"]::-webkit-search-decoration,
input.input[type="search"]::-webkit-search-cancel-button,
input.input[type="search"]::-webkit-search-results-button,
input.input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Locked select: filled automatically, can't be changed by hand */
.select.locked .select-trigger { cursor: not-allowed; opacity: .75; }
.select.locked .select-trigger .chevron { opacity: .5; }

.locked-input { position: relative; }
.locked-input .input { padding-right: 36px; cursor: not-allowed; opacity: .75; }
.locked-input .input:focus { border-color: var(--input); box-shadow: none; }
.locked-input .chevron {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; opacity: .5; pointer-events: none;
}

/* Select list with a search box */
.select-list ul { margin: 0; padding: 0; list-style: none; }
.select-list li[hidden], .select-empty[hidden] { display: none; }
.select-search { color: var(--foreground); font: inherit; font-size: .875rem; outline: none; }
.select-search::placeholder { color: var(--muted-foreground); }
.select-empty { margin: 0; padding: 8px 10px; font-size: .875rem; color: var(--muted-foreground); }

/* "?" help bubble */
.help { position: relative; display: inline-flex; color: var(--muted-foreground); cursor: help; }
.help svg { width: 14px; height: 14px; }
.help .tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  z-index: 40; width: max-content; max-width: 260px; padding: 6px 10px;
  background: var(--card-hover); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  font-size: .75rem; font-weight: 400; line-height: 1.4;
  opacity: 0; visibility: hidden; transition: opacity .12s;
}
html[data-theme="light"] .help .tip { background: #fff; box-shadow: 0 6px 16px rgba(15, 23, 42, .15); }
.help:hover .tip, .help:focus .tip { opacity: 1; visibility: visible; }

.form-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.form-actions .status { margin-right: auto; align-self: center; }

/* Result view */
.result-title-row { display: flex; gap: 12px; margin-top: 16px; }
.result-title-row .input { flex: 1; }
textarea.code-box {
  display: block; margin-top: 16px; min-height: 320px; resize: vertical;
  font-family: Consolas, 'Courier New', monospace; font-size: .8125rem; line-height: 1.5; white-space: pre; overflow: auto;
}

/* Search box inside select lists */
.select-search-wrap {
  position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 8px;
  margin: -4px -4px 4px; padding: 0 12px; background: inherit;
  border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;
}
.select-search-wrap svg { width: 16px; height: 16px; flex: none; color: var(--muted-foreground); }
.select-search-wrap .select-search { position: static; margin: 0; padding: 0; border: 0; height: 40px; flex: 1; background: transparent; }

/* Charge picker (same look as the arrest calculator) */
.charges { margin-bottom: 28px; }
.charge-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.charge-row { display: flex; gap: 10px; }
.charge-row .select { flex: 1; min-width: 0; }
.icon-btn { width: 40px; padding: 0; justify-content: center; flex: none; color: var(--muted-foreground); }
.icon-btn:hover { color: hsl(0 75% 62%); border-color: hsl(0 60% 45%); }
.opt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.opt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .opt { flex: 1; }
.code-badge {
  flex: none; min-width: 34px; padding: 2px 6px; border-radius: 4px;
  font-size: .75rem; font-weight: 600; line-height: 1.4; text-align: center; color: #fff;
  background: #6b7280;
}
.code-badge.type-F { background: #ef4444; }
.code-badge.type-M { background: #eab308; }
.code-badge.type-I { background: #22c55e; }
.select-list { max-height: 320px; }

/* Static reference text with per-line silent copy buttons */
.copylist { display: flex; flex-direction: column; gap: 10px; }
.copylist-intro { margin: 0; font-size: .8125rem; color: var(--muted-foreground); }
.copylist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.copylist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted, transparent);
}
.copylist-item span { font-size: .875rem; line-height: 1.4; }
.copylist-copy { width: 32px; height: 32px; }
.copylist-copy svg { width: 16px; height: 16px; }

.field-copy-btn { width: 28px; height: 28px; margin-left: auto; }
.field-copy-btn svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .field-grid.cols-3 { grid-template-columns: 1fr; }
  .dual-column-wrap { flex-direction: column; gap: 0; }
}