/* ============================================================
   App-level styles. All core component primitives live in
   components.css; this file is the project-specific layer:
   Settings page layout, references textarea, AI prompt block,
   editor-page integration helpers, and Zoho-preview tweaks.
   ============================================================ */

/* ---- Settings page layout (01-settings.html) ---- */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ---- AI prompt block (07-kb-new: compose) ---- */
.ai-prompt-textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 12px;
  line-height: var(--leading-relaxed);
  outline: none;
  resize: vertical;
  transition: border-color .14s, box-shadow .14s;
}
.ai-prompt-textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }

/* ---- Reference links textarea (sidebar) ---- */
.ref-links-textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  outline: none;
  resize: vertical;
  transition: border-color .14s, box-shadow .14s;
}
.ref-links-textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }

/* ---- Editor markdown textarea (left half of split) ---- */
.md-editor-textarea {
  width: 100%;
  border: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  padding: 16px;
  outline: none;
  resize: none;
  min-height: 360px;
}
.editor-preview { overflow: auto; padding: 0; background: var(--color-surface-2); min-height: 360px; }

/* The Zoho preview sits inside .md-preview / .detail page — keep it readable
   on both themes via flush variant (no extra padding from the .zoho card). */
.zoho-preview { background: #FFFFFF; color: #1A1A1A; }

/* ---- Empty-state helper ---- */
.empty-hint { margin-bottom: var(--space-3); }

/* ---- Sub-tip italic bullets inside Zoho render ---- */
.zoho .subtip { font-style: italic; color: #444; }

/* ============================================================
   Editor-specific tweaks layered on top of .editor-shell / .block
   ============================================================ */
.editor-prompt-block,
.editor-source-block,
.editor-template-block { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-md); }
.editor-prompt-block .block-head,
.editor-source-block .block-head,
.editor-template-block .block-head { padding: 12px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.editor-prompt-block .block-head .block-title,
.editor-source-block .block-head .block-title,
.editor-template-block .block-head .block-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-heading); }
.editor-prompt-block .block-head .block-title .ti,
.editor-source-block .block-head .block-title .ti,
.editor-template-block .block-head .block-title .ti { color: var(--color-accent-text); font-size: var(--text-lg); }
.editor-prompt-block .block-head .hint,
.editor-source-block .block-head .hint,
.editor-template-block .block-head .hint { margin-top: 4px; }
.editor-prompt-block .block-pad,
.editor-prompt-block > .lang-toggle { padding: 0 16px; }
.editor-prompt-block .ai-prompt-textarea,
.editor-prompt-block > * { margin: 16px; }
.editor-prompt-block .lang-toggle { display: inline-flex; }

/* Responsive — collapse the editor sidebar under the main panel on narrow viewports */
@media (max-width: 1000px) {
  .editor-shell { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
  .editor-split { grid-template-columns: 1fr; }
  .md-textarea, .md-editor-textarea { border-right: 0; border-bottom: 1px solid var(--color-border); }
}

/* Rail collapses on narrow viewports (the bucket nav becomes a horizontal toolbar) */
@media (max-width: 760px) {
  .app-body { flex-direction: column; }
  .rail { width: 100%; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--color-border); max-height: 200px; }
  .rail-inner { flex-direction: row; flex-wrap: wrap; padding: var(--space-3); gap: var(--space-3); }
  .rail-tree { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   Responsive nav scaling (2026-06-02). With 7+ buttons in nav-right
   (user-email, status-pill, optional AI-pill, log, help, settings, lang,
   theme), narrow viewports push buttons off-screen. Strategy: progressively
   hide low-priority items as the viewport shrinks.
   ============================================================ */
/* Tablet — hide the user email (still visible in Settings). */
@media (max-width: 1024px) {
  .nav { padding: 0 var(--space-4); gap: var(--space-3); }
  .user-email { display: none; }
  .toolbar { padding: var(--space-3) var(--space-4); }
  .page { padding: var(--space-5) var(--space-5); }
  .bulk-bar { margin: 0 var(--space-4) var(--space-3); }
  .bulk-progress { margin: 0 var(--space-4) var(--space-3); }
}

/* Compact tablet / large phone — hide the "đã kết nối" status pill (info
   already implicit when user is using the app), shrink toolbar padding. */
@media (max-width: 760px) {
  .status-pill { display: none; }
  .nav { padding: 0 var(--space-3); gap: var(--space-2); height: 52px; }
  .nav-right { gap: 4px; }
  .toolbar { padding: var(--space-3); gap: var(--space-2); }
  .toolbar-title { font-size: var(--text-base); }
  .page { padding: var(--space-4) var(--space-3); }
  .search { max-width: none; min-width: 0; flex-basis: 100%; }
  .scroll { padding: var(--space-3) !important; }
}

/* Phone — collapse the lang toggle into icon-style, shrink button padding,
   stack toolbar items more aggressively. */
@media (max-width: 540px) {
  .nav { padding: 0 var(--space-2); }
  .nav-brand .nav-logo { height: 18px; }
  .nav-sub { display: none; }
  .btn-sm { padding: 0 8px; font-size: var(--text-xs); }
  .btn-icon.btn-sm { width: 28px; }
  .lang-toggle button { padding: 0 8px; font-size: var(--text-xs); }
  .toolbar { padding: var(--space-2) var(--space-3); }
  .toolbar-title { font-size: var(--text-sm); }
  .toolbar-title .sub { display: none; }
  .bulk-bar { padding: 8px 10px; font-size: var(--text-sm); }
  .bulk-bar .bulk-tpl { display: none; }
  /* AI status pill — keep the icon + number but hide the verbose label */
  .nav-right .status-pill { display: none; }
}

/* ---- Tab restore banner used by editor "Unsaved draft found" ---- */
.warning-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-warning-tint); border: 1px solid var(--color-warning-border); font-size: var(--text-base); margin-bottom: var(--space-4); }
.warning-banner .ti { color: var(--color-warning); font-size: var(--text-xl); flex: 0 0 auto; }

/* ---- Validation panel (re-used by editor) ---- */
.tpl-validation { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.tpl-validation-group + .tpl-validation-group { border-top: 1px solid var(--color-border); }
.tpl-validation-head { padding: 8px 12px; font-size: var(--text-xs); font-weight: var(--weight-bold); display: flex; align-items: center; gap: 6px; }
.tpl-validation-head.err  { background: var(--color-danger-tint); color: var(--color-danger); }
.tpl-validation-head.warn { background: var(--color-warning-tint); color: var(--color-warning); }
.tpl-validation ul { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.tpl-issue { display: flex; gap: 8px; font-size: var(--text-sm); line-height: 1.4; color: var(--color-text); }
.tpl-issue .ti { flex: 0 0 auto; margin-top: 1px; }
.tpl-issue.err .ti  { color: var(--color-danger); }
.tpl-issue.warn .ti { color: var(--color-warning); }