/**
 * LiLaBotsale Admin — form & input spacing
 */

/* ── Base controls ── */
.admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-shell select,
.admin-shell textarea,
#loginView input:not([type="checkbox"]):not([type="radio"]),
#adminModalRoot input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#adminModalRoot select,
#adminModalRoot textarea,
#cmdPalette input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  min-height: 2.625rem;
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid #475569;
  border-radius: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.admin-shell textarea,
#adminModalRoot textarea {
  min-height: 5rem;
  resize: vertical;
}

.admin-shell input::placeholder,
.admin-shell textarea::placeholder,
#adminModalRoot input::placeholder,
#adminModalRoot textarea::placeholder {
  color: #64748b;
}

.admin-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-shell select:focus,
.admin-shell textarea:focus,
#loginView input:focus,
#adminModalRoot input:focus,
#adminModalRoot select:focus,
#adminModalRoot textarea:focus,
#cmdPalette input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

.admin-shell select,
#adminModalRoot select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.admin-shell input[type="checkbox"],
.admin-shell input[type="radio"],
#adminModalRoot input[type="checkbox"],
#adminModalRoot input[type="radio"] {
  width: 1rem;
  height: 1rem;
  min-height: unset;
  margin: 0;
  flex-shrink: 0;
  accent-color: #6366f1;
  cursor: pointer;
}

.admin-shell input[type="file"],
#adminModalRoot input[type="file"] {
  width: 100%;
  min-height: unset;
  padding: 0.5rem 0;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.admin-shell input[type="date"],
#adminModalRoot input[type="date"],
.admin-shell input.input-date,
#adminModalRoot input.input-date {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #475569;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.875rem;
  color-scheme: dark;
  cursor: pointer;
}

.admin-shell input[type="date"]::-webkit-calendar-picker-indicator,
#adminModalRoot input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

.admin-shell input[readonly],
.admin-shell input:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

/* ── Labels ── */
.admin-shell label,
#loginView label,
#adminModalRoot label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  margin: 0;
  line-height: 1.35;
}

label.form-check,
.admin-shell label.form-check,
#adminModalRoot label.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #cbd5e1;
  margin: 0;
}

label.form-check input {
  margin-top: 0.125rem;
}

/* ── Field wrapper ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.form-field > label {
  margin-bottom: 0;
}

/* Grid / stack layouts */
.form-grid {
  display: grid;
  gap: 1rem 1.25rem;
}

.form-grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.form-grid-2 .span-2,
.form-grid-3 .span-2,
.form-grid-4 .span-2 {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-grid-2 .span-2 { grid-column: span 2; }
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-stack > input,
.form-stack > select,
.form-stack > textarea {
  margin: 0;
}

.form-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.625rem;
}

.form-toolbar > input,
.form-toolbar > select {
  flex: 1 1 12rem;
  min-width: 0;
}

.form-toolbar > button {
  flex-shrink: 0;
  align-self: stretch;
  min-height: 2.625rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1rem;
}

.form-actions > button,
.form-actions > a {
  min-height: 2.625rem;
}

.form-block {
  margin-bottom: 1.25rem;
}

.form-block:last-child {
  margin-bottom: 0;
}

/* Chat input bar */
.chat-input-bar {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid #334155;
}

.chat-input-bar input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.chat-input-bar button {
  flex-shrink: 0;
  align-self: stretch;
}

/* Sidebar nav filter — compact */
.nav-search-row {
  display: flex;
  gap: 0.375rem;
  align-items: stretch;
}

.nav-search-row input {
  min-height: 2.125rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  flex: 1;
}

.nav-search-row button {
  min-height: 2.125rem;
}

/* Panel section spacing */
.admin-panel h2 + p {
  margin-bottom: 1rem;
}

.admin-panel .panel-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.admin-panel .panel-card + .panel-card {
  margin-top: 1rem;
}

.admin-panel .panel-card h3 {
  margin-bottom: 0.875rem;
  font-weight: 600;
}

#panel-profile .panel-card input:not(:disabled) {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.form-grid .form-field label.form-check {
  display: flex;
  align-items: center;
  min-height: 2.625rem;
}

.admin-shell input[type="range"] {
  width: 100%;
  min-height: unset;
  padding: 0.5rem 0;
  accent-color: #6366f1;
  cursor: pointer;
}

body[data-admin-scope="company"] .platform-only {
  display: none !important;
}
body[data-admin-scope="company"] #kwCompanyCard {
  grid-column: 1 / -1;
}

/* Chat kiểm thử — sidebar + chat cân đối trên màn rộng */
.chat-test-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.chat-test-settings {
  padding: 1rem;
}
.chat-test-options {
  gap: 0.625rem;
}
.chat-test-messages-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 420px;
}
.chat-test-window {
  min-height: 420px;
  height: min(62vh, 560px);
}
.chat-voice-panel.voice-mode-active {
  border-top: 1px solid #334155;
  background: rgba(15, 23, 42, 0.85);
  flex: 1;
  justify-content: center;
  padding: 0.875rem 1rem;
  gap: 0.65rem;
  font-size: 0.9rem;
}
.chat-voice-panel.voice-mode-active [id$="VoiceStatus"] {
  color: #e2e8f0;
  font-weight: 600;
}
.chat-test-meta {
  min-height: 8rem;
  max-height: 200px;
}
@media (min-width: 1024px) {
  .chat-test-layout {
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
  }
  .chat-test-settings {
    width: 17rem;
    flex-shrink: 0;
    max-height: min(72vh, 600px);
    overflow-y: auto;
  }
  .chat-test-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .chat-test-messages-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 26%);
    gap: 1rem;
    flex: 1;
    min-height: min(72vh, 600px);
  }
  .chat-test-window {
    height: 100%;
    min-height: 480px;
  }
  .chat-test-meta {
    max-height: none;
    height: 100%;
    min-height: 0;
  }
}

/* Bảng tài liệu — không scroll khung, dùng phân trang */
.doc-table-wrap {
  overflow: visible;
}
.doc-table th,
.doc-table td {
  white-space: nowrap;
}
.doc-table th:nth-child(2),
.doc-table td:nth-child(2) {
  white-space: normal;
  min-width: 10rem;
}