/*
 * cms.css — the content editor screens (blog post add/edit). Loaded after app.css; nothing here changes
 * existing screens. Colours come from the variables below (brand = the sidebar/button blue-grey in app.css),
 * and every variable has a dark-mode value, so no component needs its own [data-theme="dark"] rule.
 */
:root {
  --brand: #5D7B8E;
  --brand-dark: #4A6578;
  --brand-50: #eef2f5;
  --brand-ring: rgba(93, 123, 142, .18);
  --cms-text: #111827;
  --cms-muted: #6b7280;
  --cms-faint: #9ca3af;
  --cms-line: #e5e7eb;
  --cms-surface: #ffffff;
  --cms-soft: #f9fafb;
  --cms-warn: #b45309;
  --cms-warn-bg: #fffbeb;
  --cms-warn-line: #fde68a;
  --cms-err: #991b1b;
  --cms-err-bg: #fef2f2;
  --cms-err-line: #fecaca;
  --cms-ok: #15803d;
  --cms-pop-bg: #111827;
  --cms-pop-text: #ffffff;
}
[data-theme="dark"] {
  --brand: #7fa9c0;
  --brand-dark: #a9c7d6;
  --brand-50: #1e2d40;
  --brand-ring: rgba(127, 169, 192, .22);
  --cms-text: #f1f5f9;
  --cms-muted: #94a3b8;
  --cms-faint: #64748b;
  --cms-line: #334155;
  --cms-surface: #1e293b;
  --cms-soft: #0f172a;
  --cms-warn: #fbbf24;
  --cms-warn-bg: #3a2a0b;
  --cms-warn-line: #6b4e12;
  --cms-err: #fca5a5;
  --cms-err-bg: #3b1518;
  --cms-err-line: #7f1d1d;
  --cms-ok: #4ade80;
  --cms-pop-bg: #e2e8f0;
  --cms-pop-text: #0f172a;
}

/* ---- small utilities the purged tailwind.css may not contain ---- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[v-cloak] { display:none; }

/* ---- page header ---- */
.cms-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; padding:.6rem 0; position:sticky; top:3.5rem; z-index:25; background:var(--cms-soft); }
@media (min-width:1024px) { .cms-head { top:0; margin-top:-.6rem; } }
.cms-head-main { display:flex; align-items:center; gap:.75rem; min-width:0; }
.cms-title { font-size:1.25rem; font-weight:700; color:var(--cms-text); line-height:1.2; }
.cms-dirty { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:var(--cms-warn); margin-top:.15rem; }
.cms-saved { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:var(--cms-faint); margin-top:.15rem; }
.cms-head-actions { display:flex; align-items:center; gap:.5rem; }
.btn-ai { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; background:var(--cms-surface); color:var(--cms-text); font-size:.875rem; font-weight:500; border-radius:9px; border:1px solid var(--cms-line); cursor:pointer; transition:all .15s; }
.btn-ai:hover { border-color:var(--brand); background:var(--brand-50); }
.btn-ai i { color:var(--brand); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-ai:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ---- layout: main column + side column ---- */
.cms-split { display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1024px) { .cms-split { grid-template-columns:minmax(0,1fr) 320px; } .cms-side { position:sticky; top:5.25rem; } }
.cms-stack { display:grid; gap:1.25rem; }
.cms-sec { padding:1.25rem 1.5rem; }
@media (max-width:639px) { .cms-sec { padding:1rem; } }
.cms-sec-title { font-size:.95rem; font-weight:700; color:var(--cms-text); display:flex; align-items:center; gap:.5rem; }
.cms-sec-sub { font-size:.78rem; color:var(--cms-muted); margin:.15rem 0 1rem; }
.cms-sec-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--brand-50); color:var(--brand-dark); font-size:.7rem; font-weight:700; flex-shrink:0; }
.cms-grid { display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px) { .cms-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .cms-grid .span-all { grid-column:1 / -1; } }
.cms-field + .cms-field { margin-top:1rem; }
.cms-hint { font-size:.75rem; color:var(--cms-muted); margin-top:.3rem; }
.cms-hint b { color:var(--cms-text); font-weight:600; }
.cms-count { font-size:.72rem; color:var(--cms-faint); margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cms-count.warn { color:var(--cms-warn); font-weight:600; }
.cms-note { font-size:.8rem; background:var(--cms-warn-bg); border:1px solid var(--cms-warn-line); color:var(--cms-warn); border-radius:.6rem; padding:.55rem .8rem; line-height:1.4; }
.cms-note.error { background:var(--cms-err-bg); border-color:var(--cms-err-line); color:var(--cms-err); }
.cms-input-err { border-color:var(--cms-err-line) !important; }

/* ---- label row with help chip ---- */
.cms-label-row { display:flex; align-items:center; gap:.35rem; margin-bottom:.3rem; position:relative; }
.cms-label-row .form-label { margin:0; color:var(--cms-text); }
.help-chip { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:0; background:var(--cms-line); color:var(--cms-muted); font-size:.62rem; cursor:help; padding:0; line-height:1; }
.help-chip:hover, .help-chip:focus-visible, .help-chip[aria-expanded="true"] { background:var(--brand); color:#fff; outline:none; }
.help-pop { position:absolute; z-index:40; left:0; top:calc(100% + 6px); width:min(280px, 80vw); background:var(--cms-pop-bg); color:var(--cms-pop-text); font-size:.75rem; line-height:1.4; border-radius:.5rem; padding:.6rem .8rem; box-shadow:0 8px 24px rgba(0,0,0,.25); font-weight:400; }

/* ---- inputs that follow the brand ---- */
.cms-sec .form-input:focus, .cms-sec .form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
textarea.form-input { resize:vertical; line-height:1.45; }

/* ---- choice boxes (categories) ---- */
.cms-checks { border:1px solid var(--cms-line); border-radius:.6rem; padding:.55rem .75rem; max-height:210px; overflow-y:auto; display:grid; gap:.1rem; background:var(--cms-surface); grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.cms-checks label { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--cms-text); padding:.3rem .25rem; border-radius:.4rem; cursor:pointer; }
.cms-checks label:hover { background:var(--brand-50); }
.cms-checks input, .cms-switch input { accent-color:var(--brand); }
.cms-link-btn { background:none; border:0; cursor:pointer; color:var(--brand); font-size:.78rem; margin-left:auto; padding:0; }
.cms-link-btn:hover { text-decoration:underline; }

/* ---- switch rows (Active / Featured) ---- */
.cms-switch { display:flex; align-items:flex-start; gap:.65rem; padding:.6rem 0; cursor:pointer; }
.cms-switch + .cms-switch { border-top:1px solid var(--cms-line); }
.cms-switch input { margin-top:.2rem; width:1rem; height:1rem; flex-shrink:0; }
.cms-switch b { display:block; font-size:.85rem; color:var(--cms-text); font-weight:600; }
.cms-switch span { display:block; font-size:.75rem; color:var(--cms-muted); }

/* ---- photo slot ---- */
.photo-slot { display:grid; gap:.75rem; }
.photo-thumb { width:100%; aspect-ratio:16/10; border-radius:.7rem; overflow:hidden; background:var(--cms-soft); display:flex; align-items:center; justify-content:center; border:1px dashed var(--cms-line); color:var(--cms-faint); font-size:1.6rem; }
.photo-thumb.has { border-style:solid; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cms-file { font-size:.78rem; }
.cms-file::file-selector-button { margin-right:.6rem; border:1px solid var(--cms-line); background:var(--cms-surface); color:var(--cms-text); border-radius:.5rem; padding:.3rem .7rem; cursor:pointer; }

/* ---- readiness checklist ---- */
.cms-check { display:flex; align-items:flex-start; gap:.55rem; font-size:.82rem; color:var(--cms-muted); padding:.25rem 0; }
.cms-check i { margin-top:.2rem; font-size:.8rem; color:var(--cms-faint); }
.cms-check.ok { color:var(--cms-text); }
.cms-check.ok i { color:var(--cms-ok); }
.cms-check small { display:block; font-size:.72rem; color:var(--cms-faint); }

/* ---- Google-style preview ---- */
.serp { border:1px solid var(--cms-line); border-radius:.7rem; padding:.8rem 1rem; background:var(--cms-soft); }
.serp-url { font-size:.75rem; color:var(--cms-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serp-title { font-size:1.05rem; color:var(--brand-dark); margin:.15rem 0; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serp-desc { font-size:.8rem; color:var(--cms-muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- collapsible card header ---- */
.cms-toggle { display:flex; align-items:center; gap:.55rem; background:none; border:0; cursor:pointer; padding:0; width:100%; text-align:left; color:var(--cms-text); }
.cms-toggle .cms-hint { margin:0 0 0 .3rem; }
.cms-toggle .chev { font-size:.7rem; color:var(--cms-muted); transition:transform .15s; }
.cms-toggle .chev.open { transform:rotate(90deg); }

/* ---- modals / toast ---- */
.cms-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); padding:1rem; }
.cms-modal { background:var(--cms-surface); color:var(--cms-text); border-radius:1rem; box-shadow:0 20px 60px rgba(0,0,0,.35); width:100%; max-width:34rem; max-height:calc(100vh - 2rem); overflow-y:auto; }
.cms-modal.sm { max-width:24rem; }
.cms-modal-head, .cms-modal-foot { display:flex; align-items:center; gap:.5rem; padding:1rem 1.5rem; }
.cms-modal-head { justify-content:space-between; border-bottom:1px solid var(--cms-line); }
.cms-modal-foot { justify-content:flex-end; border-top:1px solid var(--cms-line); }
.cms-modal-body { padding:1rem 1.5rem; }
.cms-modal-head h3 { font-size:1rem; font-weight:700; }
.cms-x { background:none; border:0; cursor:pointer; color:var(--cms-muted); font-size:1rem; }
.cms-x:disabled { opacity:.4; cursor:not-allowed; }
.cms-toast { position:fixed; bottom:1.5rem; right:1.5rem; left:1.5rem; margin-left:auto; max-width:26rem; background:var(--cms-pop-bg); color:var(--cms-pop-text); font-size:.875rem; padding:.8rem 1rem; border-radius:.8rem; box-shadow:0 12px 32px rgba(0,0,0,.3); z-index:70; display:flex; align-items:flex-start; gap:.6rem; }
.cms-toast i { color:#4ade80; margin-top:.15rem; }
@media (prefers-reduced-motion:no-preference) { .cms-toast { animation:cmsToast .18s ease-out; } }
@keyframes cmsToast { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- the rich-text editor sits flush inside its card ---- */
.tox-tinymce { border-radius:.7rem !important; border-color:var(--cms-line) !important; }