/* CSS dùng chung của app — phủ lên Pico, mobile-first (spec §15.1).
   Không dùng style nội tuyến: CSP chỉ cho style-src 'self'. */

:root {
  --app-error: #b42318;
  --app-success: #067647;
}

/* Bố cục chung */
.app-main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

/* Điều hướng: xuống dòng gọn trên màn hình nhỏ */
.app-nav {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.app-nav-brand {
  margin-right: auto;
}
.app-nav .app-nav-links {
  flex-wrap: wrap;
  column-gap: 0.75rem;
  /* Pico đặt margin âm hai bên cho ul cuối trong nav (nav ul:last-of-type,
     đặc hiệu hơn .app-nav-links đơn) — gây tràn ngang mobile nên triệt tiêu. */
  margin-left: 0;
  margin-right: 0;
}
.app-logout-form {
  margin-bottom: 0;
}
.app-logout-btn {
  margin: 0;
  padding: 0.25rem 0.75rem;
}

/* Mục điều hướng đang xem: nổi bật bằng màu chủ đạo + gạch chân (VAL-CROSS-002). */
.app-nav-links a[aria-current="page"] {
  color: var(--pico-primary, #067647);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Trang cài đặt (§15.8): bảng cấu hình chỉ đọc + hai nút hành động. */
.app-settings-section {
  margin-bottom: 1.25rem;
}
.app-settings-table {
  width: 100%;
}
.app-settings-table th[scope="row"] {
  text-align: left;
  width: 40%;
  color: var(--pico-muted-color, #666);
  font-weight: 500;
}
.app-settings-note {
  font-size: 0.85rem;
  color: var(--pico-muted-color, #666);
}
.app-settings-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.app-settings-actions form {
  margin: 0;
}

/* Thông báo flash */
.app-alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.app-alert--error {
  background: color-mix(in srgb, var(--app-error) 12%, transparent);
  color: var(--app-error);
}
.app-alert--success {
  background: color-mix(in srgb, var(--app-success) 12%, transparent);
  color: var(--app-success);
}

/* Trang đăng nhập: thẻ giữa màn hình */
.app-login {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.app-login-card {
  width: 100%;
  max-width: 24rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.75rem;
}
.app-login-card h1 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.app-login-card button[type="submit"] {
  width: 100%;
  margin-top: 1.25rem;
}

/* Trạng thái trống */
.app-empty {
  color: var(--pico-muted-color, #666);
  text-align: center;
  padding: 2rem 0;
}

/* Dữ liệu số căn phải trong bảng */
.app-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Bộ dựng điều kiện (spec §15.6) --- */

.cb-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cb-template-label {
  margin: 0;
  font-size: 0.875rem;
}
.cb-toolbar select {
  margin-bottom: 0;
  max-width: 100%;
}

/* Nhóm lồng nhau: nền xen kẽ theo cấp để phân biệt mức (§15.6). */
.cb-group {
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: transparent;
}
.cb-group--alt {
  background: color-mix(in srgb, var(--pico-primary, #067647) 6%, transparent);
}
.cb-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cb-group-title {
  font-weight: 600;
}
.cb-group-head select {
  margin-bottom: 0;
  width: auto;
}

/* Dòng điều kiện: các ô xếp ngang, xuống dòng trên mobile. */
.cb-condition {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.25rem 0;
}
.cb-condition select,
.cb-condition input {
  margin-bottom: 0;
  width: auto;
}
.cb-operand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.125rem;
  border-radius: 0.25rem;
}
.cb-const-box,
.cb-sma-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cb-labeled {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}
.cb-label-text {
  font-size: 0.8125rem;
  color: var(--pico-muted-color, #666);
}
.cb-num {
  max-width: 7rem;
}
.cb-include-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  margin: 0;
}
.cb-unit-note {
  display: block;
  flex-basis: 100%;
  color: var(--pico-muted-color, #666);
}

.cb-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.cb-btn {
  margin: 0;
  padding: 0.15rem 0.6rem;
  font-size: 0.8125rem;
}
.cb-delete {
  margin-left: auto;
}

/* Trạng thái lỗi: tô đỏ đúng ô/node (§15.5, §10.3 error path). */
.cb-invalid {
  border: 2px solid var(--app-error) !important;
}
.cb-error-message {
  display: block;
  color: var(--app-error);
}
.cb-row-errors {
  flex-basis: 100%;
}

/* Dòng xem trước: giữ dấu xuống dòng của chú thích include-current. */
.cb-preview-label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.cb-preview {
  white-space: pre-line;
  background: color-mix(in srgb, var(--pico-muted-border-color, #ccc) 25%, transparent);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.cb-check {
  margin: 0;
}
.cb-check-result {
  min-height: 1.25rem;
  font-size: 0.875rem;
}

/* Hành động form */
.app-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.app-cancel-link {
  align-self: center;
}
.app-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Trang tín hiệu (spec §15.4) --- */

.app-alert--warning {
  background: color-mix(in srgb, #b58900 12%, transparent);
  color: #b58900;
}

.app-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.app-filters input,
.app-filters select {
  margin-bottom: 0;
  width: auto;
}

.app-table-wrap {
  overflow-x: auto;
}
.app-signals-table {
  width: 100%;
}
.app-cell-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  white-space: nowrap;
}
.app-cell-actions a {
  margin-right: 0.25rem;
}
.app-cell-summary {
  max-width: 22rem;
  white-space: pre-line;
}

.app-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.app-badge--buy {
  background: color-mix(in srgb, var(--app-success) 15%, transparent);
  color: var(--app-success);
}
.app-badge--sell {
  background: color-mix(in srgb, var(--app-error) 15%, transparent);
  color: var(--app-error);
}
.app-badge--watch {
  background: color-mix(in srgb, #2563eb 12%, transparent);
  color: #2563eb;
}

/* Công tắc bật/tắt: nút bấm kiểu switch, không ảnh hưởng hàng khác (HTMX). */
.app-switch-form {
  display: inline;
  margin: 0;
}
.app-switch {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--pico-muted-border-color, #999);
  background: var(--pico-muted-border-color, #bbb);
  padding: 0;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.app-switch-knob {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
  display: block;
}
.app-switch--on {
  background: var(--app-success);
  border-color: var(--app-success);
}
.app-switch--on .app-switch-knob {
  left: calc(100% - 1.25rem);
}

/* Gợi ý mã: danh sách đặt dưới ô nhập (§15.5). */
.app-ticker-input {
  position: relative;
}
.app-ticker-suggestions {
  position: absolute;
  z-index: 10;
  background: var(--pico-background-color, #fff);
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.375rem;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  max-width: 20rem;
}
.app-ticker-suggestions[hidden] {
  display: none;
}
.app-ticker-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.app-ticker-suggestion:hover {
  background: color-mix(in srgb, var(--pico-primary, #067647) 10%, transparent);
}

/* Lỗi từng trường và gợi ý */
.app-field-error {
  display: block;
  color: var(--app-error);
}
.app-hint {
  display: block;
  color: var(--pico-muted-color, #666);
}

/* Hộp thoại xác nhận xoá (§15.4) */
.app-confirm-dialog {
  min-width: 18rem;
  max-width: 24rem;
  padding: 1.25rem;
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.75rem;
}
.app-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.app-confirm-dialog p {
  margin-bottom: 1rem;
}

/* --- Preview "Thử ngay" (FR-09, FR-22) --- */
.app-preview {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.75rem;
}
.app-preview[hidden] {
  display: none;
}
.app-preview-badge {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.app-preview-badge--matched {
  color: var(--app-success);
}
.app-preview-badge--not-matched {
  color: var(--app-error);
}
.app-preview-badge--unknown,
.app-preview-badge--invalid {
  color: var(--pico-muted-color, #666);
}
.app-preview-meta {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.app-preview-stale {
  margin-top: 0.5rem;
  font-weight: 600;
}
.app-preview-tree-title {
  margin-top: 0.75rem;
  font-weight: 600;
}
.app-preview-group {
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.app-preview-group--alt {
  background: color-mix(in srgb, var(--pico-primary, #067647) 6%, transparent);
}
.app-preview-group-head {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.app-preview-condition {
  margin-bottom: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  align-items: baseline;
}
.app-preview-marker {
  font-size: 0.875rem;
}
.app-preview-marker--ok {
  color: var(--app-success);
}
.app-preview-marker--no {
  color: var(--app-error);
}
.app-preview-marker--unknown {
  color: #b54708;
}
.app-preview-reason {
  color: #b54708;
  font-size: 0.875rem;
}
.app-preview-values {
  color: var(--pico-muted-color, #666);
  font-variant-numeric: tabular-nums;
}
.app-preview-error {
  color: var(--app-error);
}
.app-preview-detail {
  color: var(--pico-muted-color, #666);
  font-size: 0.8rem;
  word-break: break-all;
}

/* --- Trang kết quả (spec §15.3) --- */

.app-results-date {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.app-results-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.app-nav-form {
  margin: 0;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.app-nav-form button {
  margin: 0;
  padding: 0.25rem 0.75rem;
}
.app-nav-form[hidden] {
  display: none;
}
.app-nav-form input[type="date"] {
  margin-bottom: 0;
  width: auto;
}

.app-run-summary {
  font-weight: 600;
  background: color-mix(in srgb, var(--pico-muted-border-color, #ccc) 25%, transparent);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.app-run-summary--failed {
  color: var(--app-error);
}
.app-run-summary--skipped,
.app-run-summary--running {
  color: #b54708;
}

/* Lượt chạy (§15.7): badge trạng thái lượt và trạng thái Telegram, form "Chạy
   ngay" và ghi chú giới hạn lượt chạy tay qua cgroup web service. */
.app-runstatus {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.app-runstatus--success,
.app-runstatus--sent {
  background: color-mix(in srgb, var(--app-success) 15%, transparent);
  color: var(--app-success);
}
.app-runstatus--partial,
.app-runstatus--pending {
  background: color-mix(in srgb, #b54708 15%, transparent);
  color: #b54708;
}
.app-runstatus--failed {
  background: color-mix(in srgb, var(--app-error) 15%, transparent);
  color: var(--app-error);
}
.app-runstatus--skipped,
.app-runstatus--not_requested {
  background: color-mix(in srgb, #666 15%, transparent);
  color: #555;
}
.app-runstatus--running {
  background: color-mix(in srgb, #2563eb 12%, transparent);
  color: #2563eb;
}

.app-run-now {
  margin-bottom: 1.25rem;
}
.app-run-now-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.app-run-now-form input[type="date"] {
  margin-bottom: 0;
  width: auto;
}
.app-run-notify {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
}
.app-run-note {
  font-size: 0.85rem;
  color: var(--pico-muted-color, #666);
  margin-top: 0.4rem;
}
.app-runs-table {
  width: 100%;
}
.app-runs-table td,
.app-run-error-table td {
  font-variant-numeric: tabular-nums;
}

.app-show-toggle {
  margin-bottom: 0.75rem;
}
.app-show-toggle button {
  margin: 0;
}

/* Hàng kết quả: <details> cả hàng — bấm để mở rộng cây snapshot (§15.3). */
.app-results-list details {
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
}
.app-results-list details:last-child {
  border-bottom: 0;
}
.app-result summary {
  cursor: pointer;
  padding: 0.4rem 0.25rem;
  list-style: none;
}
.app-result summary::-webkit-details-marker {
  display: none;
}
.app-result summary::before {
  content: "▸";
  color: var(--pico-muted-color, #666);
  display: inline-block;
  width: 1rem;
}
.app-result[open] summary::before {
  content: "▾";
}
.app-result-grid {
  display: grid;
  grid-template-columns: 4rem minmax(7rem, 1.2fr) 4rem 6.5rem 7.5rem 2fr 9rem 7rem;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  width: 100%;
}
.app-result-grid .app-num {
  text-align: right;
}
.app-cell--cond {
  white-space: pre-line;
  word-break: break-word;
  font-size: 0.875rem;
}
.app-cell--message {
  font-size: 0.875rem;
  color: var(--pico-muted-color, #666);
  word-break: break-word;
}

/* Nhãn kết quả: màu phân biệt 4 trạng thái (§15.3). */
.app-outcome {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.app-outcome--matched {
  background: color-mix(in srgb, var(--app-success) 15%, transparent);
  color: var(--app-success);
}
.app-outcome--not_matched {
  background: color-mix(in srgb, #666 15%, transparent);
  color: #555;
}
.app-outcome--insufficient_data {
  background: color-mix(in srgb, #b54708 15%, transparent);
  color: #b54708;
}
.app-outcome--error {
  background: color-mix(in srgb, var(--app-error) 15%, transparent);
  color: var(--app-error);
}

/* Chi tiết mở rộng: metadata sao chép + cây snapshot. */
.app-result-detail {
  padding: 0.25rem 0.5rem 0.75rem 1.25rem;
}
.app-result-copied,
.app-result-message,
.app-result-bar {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color, #666);
}
.app-snap-group {
  border: 1px solid var(--pico-muted-border-color, #ccc);
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  margin: 0.35rem 0;
}
.app-snap-node-head {
  margin: 0 0 0.2rem;
  font-weight: 600;
}
.app-snap-condition {
  padding: 0.2rem 0;
}
.app-snap-operand {
  display: block;
  font-size: 0.875rem;
  color: var(--pico-muted-color, #666);
  font-variant-numeric: tabular-nums;
}

/* Mobile (§15.1): bảng kết quả thành thẻ, không tràn ngang (VAL-HISTORY-006). */
@media (max-width: 720px) {
  .app-result-grid {
    display: block;
  }
  .app-cell {
    display: block;
    padding: 0.1rem 0;
  }
  .app-cell::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--pico-muted-color, #666);
  }
  .app-cell--side::before,
  .app-cell--outcome::before {
    display: none;
  }
  .app-cell--side,
  .app-cell--outcome {
    display: inline-block;
    margin-right: 0.5rem;
  }
  .app-cell--close,
  .app-cell--volume {
    text-align: left;
  }
  .app-result-grid .app-num {
    text-align: left;
  }
}