/* pages/feedback.css — trang Phản hồi (templates/pages/feedback.html + feedback/_*.html). Tiền tố fb2-. */

.crumb-link { color: var(--muted); text-decoration: none; }
.crumb-link:hover { color: var(--accent); }
.fb2-first-title { margin-top: 8px; }
.fb2-btn { height: 40px; font-size: 14px; }

/* Nhãn loại & trạng thái */
.fb2-cat-bug { background: var(--red-bg); color: var(--red); }
.fb2-cat-feature { background: var(--violet-bg); color: var(--violet); }
.fb2-cat-ux { background: var(--blue-tag); color: var(--blue); }
.fb2-st-open { background: var(--amber-bg); color: var(--amber); }
.fb2-st-in_progress { background: var(--blue-tag); color: var(--blue); }
.fb2-st-resolved { background: var(--green-tag); color: var(--green); }

/* Hộp mời khách đăng ký */
.callout { padding: 16px 18px; }
.fb2-callout-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-md);
  background: var(--bg); color: var(--accent); display: grid; place-items: center;
}
.fb2-callout-text { flex-grow: 1; min-width: 0; }
.fb2-callout-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.fb2-callout-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); }

/* Form gửi */
.fb2-form {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md);
}
.fb2-form[hidden] { display: none; }
.fb2-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fb2-fieldset legend, .fb2-field label, .fb2-label { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.fb2-field { display: flex; flex-direction: column; min-width: 0; }
.fb2-req { color: var(--red); }
.fb2-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fb2-cat {
  height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); font-size: 14px; color: var(--text); cursor: pointer;
}
.fb2-cat:hover { border-color: var(--faint); }
.fb2-cat[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--callout); color: var(--accent); font-weight: 600; }
.fb2-input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  font: inherit; font-size: 14px; color: var(--ink);
}
.fb2-textarea { height: auto; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.fb2-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.fb2-input.is-invalid { border-color: var(--red); }
.fb2-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px; border: 1.5px dashed var(--faint); border-radius: var(--r-md);
  background: var(--bg-side); color: var(--muted); text-align: center; cursor: pointer;
}
.fb2-drop:hover, .fb2-drop.is-over { border-color: var(--accent); background: var(--callout); }
.fb2-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb2-drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb2-drop-text { font-size: 14px; color: var(--ink); }
.fb2-drop-text b { color: var(--accent); font-weight: 600; }
.fb2-drop-hint { font-size: 12px; color: var(--faint); }
.fb2-previews { display: flex; flex-wrap: wrap; gap: 14px; }
.fb2-previews:not(:empty) { padding-top: 12px; }
.fb2-preview { position: relative; width: 88px; height: 64px; border-radius: var(--r); background: var(--bg-soft); }
.fb2-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.fb2-preview-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
}
.fb2-submit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb2-note { font-size: 13px; color: var(--muted); }

/* Đã gửi (PH_2) */
.fb2-sent {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 36px 24px; border: 1px solid var(--green-tag); border-radius: var(--r-md); background: var(--green-bg);
}
.fb2-sent[hidden] { display: none; }
.fb2-sent-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--green); display: grid; place-items: center; }
.fb2-sent-title { margin: 8px 0 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.fb2-sent-text { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text); }
.fb2-sent-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Tab + bảng */
.fb2-tabs { display: flex; gap: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.fb2-tab {
  height: 44px; padding: 0 2px; border: 0; background: none;
  font-size: 14px; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.fb2-tab:hover { color: var(--ink); }
.fb2-tab.is-active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.fb2-tab-count { color: var(--faint); font-weight: 400; }
.fb2-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 150px 32px; align-items: center; column-gap: 12px;
  min-height: 48px; padding: 6px 8px; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink); text-decoration: none;
}
.fb2-row:hover { background: var(--bg-soft); color: var(--ink); }
.fb2-row.is-new { background: var(--callout); }
.fb2-row-admin { grid-template-columns: minmax(0, 1fr) 96px 100px 80px 120px 20px; }
.fb2-row > * { min-width: 0; }
.fb2-row-title { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.fb2-row-name { display: flex; flex-direction: column; min-width: 0; }
.fb2-row-text, .fb2-row-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb2-row-user { font-size: 12px; font-weight: 400; color: var(--muted); }
.fb2-row-title .icon { flex-shrink: 0; color: var(--muted); }
.fb2-has-img { color: var(--faint); }
.fb2-row-prio, .fb2-row-date { font-size: 13px; color: var(--muted); }
.fb2-row-go { display: flex; justify-content: flex-end; color: var(--faint); }
/* Bảng hẹp (màn 860–1150px: thanh bên chiếm chỗ) → dòng hai tầng như điện thoại, không thì cột tiêu đề chỉ còn
   vài chữ ("QA te…"). Đo theo bề rộng bảng, không theo màn hình. */
.fb2-table { container-type: inline-size; }
@container (max-width: 640px) {
  .fb2-row, .fb2-row-admin { grid-template-columns: auto auto minmax(0, 1fr) 20px; row-gap: 6px; padding: 10px 4px; }
  .fb2-row-title { grid-column: 1 / 4; }
  .fb2-row-go { grid-column: 4; grid-row: 1 / 3; }
  .fb2-row-cell { grid-row: 2; }
  .fb2-row-prio { display: none; }
  .fb2-row-date { text-align: right; }
}
.fb2-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 16px; color: var(--faint); text-align: center;
}
.fb2-empty p { margin: 0; font-size: 14px; color: var(--muted); }
.fb2-error { color: var(--red); }

/* Quản trị */
.fb2-admin { margin-top: 12px; }
.fb2-stats { margin-bottom: 14px; }
.fb2-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.fb2-stat-name { font-size: 13px; color: var(--muted); }
.fb2-stat-value { font-size: 22px; font-weight: 700; color: var(--ink); }
.fb2-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fb2-search {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--faint);
}
.fb2-search input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.fb2-search:focus-within { border-color: var(--accent); }
.fb2-select { position: relative; }
.fb2-select select {
  height: 36px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); font: inherit; font-size: 14px; color: var(--ink);
  appearance: none; -webkit-appearance: none; width: 100%;
}
.fb2-select .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }

/* Chi tiết (PH_3) */
.fb2-sub { max-width: 820px; }
.fb2-sub-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-top: 36px;
  border-radius: 10px; background: var(--bg-soft); color: var(--muted);
}
.fb2-sub-title { margin-top: 14px; overflow-wrap: anywhere; }
.fb2-device { font-size: 13px; overflow-wrap: anywhere; }
.fb2-admin-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--green-bg); color: var(--green); }
.fb2-admin-note[hidden] { display: none; }
.fb2-admin-note-label { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.fb2-admin-note-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.fb2-detail-title { margin-top: 28px; }
.fb2-desc { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb2-shots { display: flex; gap: 12px; flex-wrap: wrap; }
.fb2-shot {
  width: 180px; height: 120px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-soft); cursor: zoom-in;
}
.fb2-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb2-manage {
  display: flex; flex-direction: column; gap: 14px; margin-top: 32px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-side);
}
.fb2-manage-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.fb2-manage-title .icon { color: var(--muted); }
.fb2-manage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fb2-manage .fb2-select select { height: 40px; }
.fb2-btn-danger { color: var(--red); border-color: var(--red-bg); }
.fb2-btn-danger:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.fb2-back { margin-top: 32px; }

/* Ảnh phóng to */
.fb2-lightbox {
  max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: var(--r-md); background: var(--dark); overflow: visible;
}
.fb2-lightbox::backdrop { background: rgba(15, 23, 42, 0.7); }
.fb2-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 32px); border-radius: var(--r-md); cursor: zoom-out; }
.fb2-lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: var(--bg); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-pop);
}

@media (max-width: 860px) {
  .prop-name { width: auto; min-width: 116px; margin-right: 8px; }  /* nhãn dài không đè lên giá trị */
  .fb2-form { padding: 16px; }
  .fb2-btn, .fb2-input { height: 44px; }
  .fb2-textarea { height: auto; }
  .fb2-submit-row .btn { width: 100%; }
  .fb2-sub-icon { margin-top: 20px; }
  .fb2-manage-grid { grid-template-columns: minmax(0, 1fr); }
  /* Bảng → dòng hai tầng: tiêu đề trên, nhãn + ngày dưới */
  .fb2-row, .fb2-row-admin {
    grid-template-columns: auto auto minmax(0, 1fr) 20px; row-gap: 6px; padding: 10px 4px;
  }
  .fb2-row-title { grid-column: 1 / 4; }
  .fb2-row-go { grid-column: 4; grid-row: 1 / 3; }
  .fb2-row-cell { grid-row: 2; }
  .fb2-row-prio { display: none; }
  .fb2-row-date { text-align: right; }
  .fb2-shot { width: calc(50% - 6px); }
  .fb2-lightbox-close { top: 8px; right: 8px; }
}

.fb2-sub .preview-note { margin-top: 4px; }