/**
 * VavSan Live Controls — soft-vivid forms (checklists / --vsn-* uyumlu, dark-safe).
 */
:root {
  --vsn-live-radius: 12px;
  --vsn-live-input-bg: var(--vsn-surface-2, #f8fafc);
  --vsn-live-input-border: var(--vsn-border, #e2e8f0);
  --vsn-live-focus: var(--vsn-orange, #e67e22);
  --vsn-live-focus-ring: color-mix(in srgb, var(--vsn-orange, #e67e22) 22%, transparent);
  --vsn-live-invite: color-mix(in srgb, var(--vsn-orange, #e67e22) 8%, var(--vsn-surface, #fff));
  --vsn-live-invite-border: color-mix(in srgb, var(--vsn-orange, #e67e22) 28%, var(--vsn-border, #e2e8f0));
}

.page-body .form-label,
.vavmim-portal-body .form-label,
.vavhat-portal-body .form-label {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--vsn-text, #0f172a);
  margin-bottom: .4rem;
}
.page-body .form-label .vsn-req,
.vavmim-portal-body .form-label .vsn-req {
  color: var(--vsn-danger, #ef4444);
  margin-left: .15rem;
}

.page-body .form-control,
.page-body .form-select,
.vavmim-portal-body .form-control,
.vavmim-portal-body .form-select,
.vavhat-portal-body .form-control,
.vavhat-portal-body .form-select {
  min-height: 2.75rem;
  border-radius: var(--vsn-live-radius) !important;
  border: 1.5px solid var(--vsn-live-input-border) !important;
  background: var(--vsn-live-input-bg) !important;
  color: var(--vsn-text, #0f172a) !important;
  font-weight: 500;
  padding: .55rem .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.page-body textarea.form-control,
.vavmim-portal-body textarea.form-control {
  min-height: 6.5rem;
  line-height: 1.45;
}
.page-body .form-control::placeholder,
.vavmim-portal-body .form-control::placeholder {
  color: var(--vsn-text-muted, #94a3b8);
  font-weight: 500;
}
.page-body .form-control:hover,
.page-body .form-select:hover,
.vavmim-portal-body .form-control:hover,
.vavmim-portal-body .form-select:hover {
  border-color: color-mix(in srgb, var(--vsn-live-focus) 40%, var(--vsn-border, #e2e8f0)) !important;
  background: var(--vsn-surface, #fff) !important;
}
.page-body .form-control:focus,
.page-body .form-select:focus,
.vavmim-portal-body .form-control:focus,
.vavmim-portal-body .form-select:focus,
.vavhat-portal-body .form-control:focus,
.vavhat-portal-body .form-select:focus {
  border-color: var(--vsn-live-focus) !important;
  background: var(--vsn-surface, #fff) !important;
  box-shadow: 0 0 0 3px var(--vsn-live-focus-ring) !important;
  outline: none !important;
}

.vsn-field-invite {
  position: relative;
  border-radius: 16px;
  padding: .85rem 1rem;
  background: var(--vsn-live-invite);
  border: 1.5px dashed var(--vsn-live-invite-border);
  margin-bottom: 1rem;
  color: var(--vsn-text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.vsn-field-invite.is-active,
.vsn-field-invite:focus-within {
  border-style: solid;
  border-color: var(--vsn-live-focus);
  background: var(--vsn-surface, #fff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.vsn-field-invite__hint {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vsn-text-muted, #64748b);
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.vsn-field-invite__hint i { color: var(--vsn-live-focus); }

.vsn-search { position: relative; display: flex; align-items: stretch; width: 100%; }
.vsn-search > .vsn-search__icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--vsn-live-focus); pointer-events: none; z-index: 2; font-size: 1.1rem; opacity: .85;
}
.vsn-search > .form-control,
.vsn-search > input[type="search"],
.vsn-search > input[type="text"] {
  padding-left: 2.65rem !important;
  padding-right: 2.5rem !important;
  border-radius: 999px !important;
  font-size: .95rem;
}
.vsn-search__clear {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  border: 0;
  background: color-mix(in srgb, var(--vsn-border, #e2e8f0) 55%, var(--vsn-surface));
  color: var(--vsn-text-muted, #64748b);
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.vsn-search.has-value .vsn-search__clear { display: inline-flex; }
.vsn-search__clear:hover { background: color-mix(in srgb, var(--vsn-danger, #ef4444) 18%, var(--vsn-surface)); color: var(--vsn-danger, #dc2626); }

.vsn-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 1080;
  max-height: 280px; overflow: auto; border-radius: 14px;
  border: 1px solid var(--vsn-border, #e2e8f0);
  background: var(--vsn-surface, #fff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  display: none; color: var(--vsn-text);
}
.vsn-search-results.is-open { display: block; }
.vsn-search-results__item {
  display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem;
  border: 0; width: 100%; background: transparent; text-align: left;
  color: var(--vsn-text, #0f172a); cursor: pointer;
  border-bottom: 1px solid var(--vsn-border, #e2e8f0);
}
.vsn-search-results__item:last-child { border-bottom: 0; }
.vsn-search-results__item:hover,
.vsn-search-results__item.is-active {
  background: var(--vsn-accent-orange-soft, rgba(230, 126, 34, .12));
}
.vsn-search-results__empty {
  padding: 1rem; text-align: center; color: var(--vsn-text-muted, #64748b); font-size: .85rem;
}

.vsn-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .65rem;
}
.vsn-choice { position: relative; margin: 0 !important; padding: 0 !important; }
.vsn-choice .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.vsn-choice .form-check-label,
.vsn-choice > label {
  display: flex; flex-direction: column; gap: .2rem; min-height: 3.5rem;
  padding: .85rem 1rem .85rem 2.5rem; border-radius: 14px;
  border: 1.5px solid var(--vsn-border, #e2e8f0);
  background: var(--vsn-surface, #fff); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
  color: var(--vsn-text, #0f172a); font-weight: 600; font-size: .88rem; margin: 0; width: 100%;
}
.vsn-choice .form-check-label::before,
.vsn-choice > label::before {
  content: ''; position: absolute; left: .85rem; top: 1.1rem;
  width: 1.1rem; height: 1.1rem; border-radius: .35rem;
  border: 1.5px solid var(--vsn-border, #cbd5e1);
  background: var(--vsn-surface-2, #f8fafc);
}
.vsn-choice .form-check-input[type="radio"] + .form-check-label::before,
.vsn-choice .form-check-input[type="radio"] + label::before { border-radius: 999px; }
.vsn-choice .form-check-label:hover,
.vsn-choice > label:hover {
  border-color: color-mix(in srgb, var(--vsn-live-focus) 45%, var(--vsn-border, #e2e8f0));
  transform: translateY(-1px);
}
.vsn-choice .form-check-input:checked + .form-check-label,
.vsn-choice .form-check-input:checked + label,
.vsn-choice.is-checked .form-check-label {
  border-color: var(--vsn-live-focus);
  background: var(--vsn-accent-orange-soft, rgba(230, 126, 34, .12));
  box-shadow: 0 0 0 3px var(--vsn-live-focus-ring);
}
.vsn-choice .form-check-input:checked + .form-check-label::before,
.vsn-choice .form-check-input:checked + label::before {
  border-color: var(--vsn-live-focus);
  background: var(--vsn-live-focus);
  box-shadow: inset 0 0 0 2px var(--vsn-surface, #fff);
}
.vsn-choice .form-check-label small,
.vsn-choice > label small {
  font-weight: 500; color: var(--vsn-text-muted, #64748b); font-size: .75rem;
}

.page-body .card,
.vavmim-portal-body .card {
  border-radius: 16px;
  border-color: var(--vsn-border, #e2e8f0);
  background: var(--vsn-surface, #fff);
  color: var(--vsn-text);
  transition: box-shadow .15s, border-color .15s;
}
.page-body .card:hover {
  border-color: color-mix(in srgb, var(--vsn-orange, #e67e22) 30%, var(--vsn-border, #e2e8f0));
}
.page-body .card > .card-header {
  background: var(--vsn-surface, #fff);
  border-bottom-color: var(--vsn-border, #e2e8f0);
  color: var(--vsn-text);
}

.page-body .form-check-input:not(.vsn-choice .form-check-input),
.vavmim-portal-body .form-check-input:not(.vsn-choice .form-check-input) {
  width: 1.15rem; height: 1.15rem;
  border: 1.5px solid var(--vsn-border, #cbd5e1);
  cursor: pointer;
  background-color: var(--vsn-surface-2, #f8fafc);
}
.page-body .form-check-input:checked,
.vavmim-portal-body .form-check-input:checked {
  background-color: var(--vsn-live-focus);
  border-color: var(--vsn-live-focus);
}
.page-body .form-switch .form-check-input:checked {
  background-color: var(--vsn-success, #10b981);
  border-color: var(--vsn-success, #10b981);
}

.page-body .pagination .page-link,
.vavmim-portal-body .pagination .page-link {
  border-radius: 999px !important;
  margin: 0 .2rem;
  min-width: 2.35rem; height: 2.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--vsn-border, #e2e8f0) !important;
  background: var(--vsn-surface, #fff) !important;
  color: var(--vsn-text, #334155) !important;
  font-weight: 700; font-size: .85rem;
}
.page-body .pagination .page-link:hover {
  border-color: var(--vsn-live-focus) !important;
  color: var(--vsn-live-focus) !important;
}
.page-body .pagination .page-item.active .page-link,
.vavmim-portal-body .pagination .page-item.active .page-link {
  background: var(--vsn-live-focus) !important;
  border-color: var(--vsn-live-focus) !important;
  color: #fff !important;
}

.vsn-filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .75rem .9rem; border-radius: 14px;
  background: var(--vsn-surface-2, #f8fafc);
  border: 1px solid var(--vsn-border, #e2e8f0);
  margin-bottom: 1rem; color: var(--vsn-text);
}

.page-body .select2-container--bootstrap4 .select2-selection,
.page-body .select2-container--default .select2-selection--single {
  min-height: 2.75rem !important;
  border-radius: var(--vsn-live-radius) !important;
  border: 1.5px solid var(--vsn-live-input-border) !important;
  background: var(--vsn-live-input-bg) !important;
  color: var(--vsn-text) !important;
}
.page-body .select2-container--bootstrap4.select2-container--focus .select2-selection,
.page-body .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--vsn-live-focus) !important;
  box-shadow: 0 0 0 3px var(--vsn-live-focus-ring) !important;
}

.customer-search-widget .input-group-text {
  border-radius: 999px 0 0 999px !important;
  border: 1.5px solid var(--vsn-live-input-border) !important;
  border-right: 0 !important;
  background: var(--vsn-live-input-bg) !important;
  color: var(--vsn-live-focus) !important;
}
.customer-search-widget .form-control { border-left: 0 !important; border-radius: 0 !important; }
.customer-search-widget .btn-icon { border-radius: 0 !important; }
.customer-search-widget .btn-icon:last-of-type { border-radius: 0 999px 999px 0 !important; }

/* Dark — checklists / head.php --vsn-* ile hizalı */
[data-bs-theme="dark"] {
  --vsn-live-input-bg: var(--vsn-surface-2, #334155);
  --vsn-live-input-border: var(--vsn-border, #475569);
  --vsn-live-invite: color-mix(in srgb, var(--vsn-orange, #e67e22) 12%, var(--vsn-surface, #1e293b));
  --vsn-live-invite-border: color-mix(in srgb, var(--vsn-orange, #e67e22) 35%, var(--vsn-border, #475569));
}
[data-bs-theme="dark"] .page-body .form-control,
[data-bs-theme="dark"] .page-body .form-select,
[data-bs-theme="dark"] .vavmim-portal-body .form-control,
[data-bs-theme="dark"] .vavmim-portal-body .form-select {
  background: var(--vsn-surface-2) !important;
  color: var(--vsn-text) !important;
  border-color: var(--vsn-border) !important;
}
[data-bs-theme="dark"] .page-body .form-control:hover,
[data-bs-theme="dark"] .page-body .form-select:hover,
[data-bs-theme="dark"] .page-body .form-control:focus,
[data-bs-theme="dark"] .page-body .form-select:focus {
  background: var(--vsn-surface) !important;
  color: var(--vsn-text) !important;
}
[data-bs-theme="dark"] .page-body .card,
[data-bs-theme="dark"] .page-body .card > .card-header,
[data-bs-theme="dark"] .vsn-search-results,
[data-bs-theme="dark"] .vsn-field-invite.is-active,
[data-bs-theme="dark"] .vsn-field-invite:focus-within {
  background: var(--vsn-surface) !important;
  color: var(--vsn-text) !important;
  border-color: var(--vsn-border) !important;
}
[data-bs-theme="dark"] .vsn-choice .form-check-label,
[data-bs-theme="dark"] .vsn-choice > label {
  background: var(--vsn-surface) !important;
  color: var(--vsn-text) !important;
}
[data-bs-theme="dark"] .vsn-filter-bar {
  background: var(--vsn-surface-2) !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-body .form-control,
  .page-body .card,
  .vsn-choice .form-check-label,
  .page-body .pagination .page-link {
    transition: none !important;
  }
}