/*
 * cms.css — the few utility classes the content screens (Posts editor, Home Page, Sliders, Tags) use that the
 * pre-built, purged tailwind.css does not contain, plus the small components those screens share
 * (help chip, section cards, tag input, switches). Loaded after app.css; nothing here changes existing screens.
 */

/* ---- missing utilities ---- */
.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; }
.shrink-0 { flex-shrink:0; }
.gap-1 { gap:.25rem; }
.px-2 { padding-left:.5rem; padding-right:.5rem; }
.mt-3 { margin-top:.75rem; }
.pt-3 { padding-top:.75rem; }
.mt-auto { margin-top:auto; }
.whitespace-nowrap { white-space:nowrap; }
.opacity-60 { opacity:.6; }
.cursor-grab { cursor:grab; }
.rounded-md { border-radius:.375rem; }
.max-w-xs { max-width:20rem; }
.max-h-56 { max-height:14rem; }
.grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.text-amber-700 { color:#b45309; }
.text-amber-800 { color:#92400e; }
.border-amber-200 { border-color:#fde68a; }
.min-w-\[200px\] { min-width:200px; }
.last\:border-0:last-child { border-width:0; }
@media (min-width:640px) { .sm\:col-span-4 { grid-column:span 4 / span 4; } }
@media (min-width:1024px) {
  .lg\:sticky { position:sticky; }
  .lg\:top-4 { top:1rem; }
  .lg\:grid-cols-\[1fr_230px\] { grid-template-columns:minmax(0,1fr) 230px; }
}

/* ---- editor 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) 300px; } .cms-side { position:sticky; top:1rem; } }
.cms-stack > * + * { margin-top:1.25rem; }
.cms-sec { padding:1.25rem 1.5rem; }
.cms-sec-title { font-size:.95rem; font-weight:700; color:#111827; }
.cms-sec-sub { font-size:.78rem; color:#6b7280; margin:.15rem 0 1rem; }
.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.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cms-grid .span-all { grid-column:1 / -1; }
}
.cms-hint { font-size:.75rem; color:#6b7280; margin-top:.25rem; }
.cms-count { font-size:.72rem; color:#9ca3af; margin-left:auto; white-space:nowrap; }
.cms-count.warn { color:#b45309; font-weight:600; }
.cms-note { font-size:.78rem; background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:.5rem; padding:.45rem .7rem; }
.cms-note.info { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.cms-rule { border:0; border-top:1px solid #f0f1f5; margin:1rem 0; }

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

/* ---- choice boxes (programs / countries) ---- */
.cms-checks { border:1px solid #e5e7eb; border-radius:.6rem; padding:.6rem .75rem; max-height:190px; overflow-y:auto; display:grid; gap:.3rem; background:#fff; }
.cms-checks label { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:#374151; }

/* ---- switch rows (Active / Featured / Announce) ---- */
.cms-switch { display:flex; align-items:flex-start; gap:.6rem; padding:.55rem 0; }
.cms-switch + .cms-switch { border-top:1px solid #f3f4f6; }
.cms-switch input { margin-top:.2rem; width:1rem; height:1rem; }
.cms-switch b { display:block; font-size:.85rem; color:#111827; font-weight:600; }
.cms-switch span { display:block; font-size:.75rem; color:#6b7280; }

/* ---- tag input ---- */
.tag-box { border:1px solid #d1d5db; border-radius:.6rem; padding:.35rem .5rem; display:flex; flex-wrap:wrap; gap:.35rem; background:#fff; position:relative; }
.tag-box:focus-within { border-color:var(--hf-blue); box-shadow:0 0 0 3px rgba(11,108,181,.15); }
.tag-chip { display:inline-flex; align-items:center; gap:.3rem; background:var(--hf-blue-50); color:var(--hf-blue-dark); border-radius:999px; padding:.15rem .3rem .15rem .65rem; font-size:.8rem; }
.tag-chip button { border:0; background:transparent; color:var(--hf-blue); cursor:pointer; font-size:.8rem; padding:0 .25rem; line-height:1; }
.tag-chip button:hover { color:#dc2626; }
.tag-box input { border:0; outline:0; flex:1; min-width:140px; font-size:.85rem; padding:.2rem .1rem; background:transparent; }
.tag-sugg { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; background:#fff; border:1px solid #e5e7eb; border-radius:.6rem; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:220px; overflow-y:auto; }
.tag-sugg button { display:block; width:100%; text-align:left; border:0; background:transparent; padding:.45rem .8rem; font-size:.85rem; cursor:pointer; }
.tag-sugg button:hover, .tag-sugg button.on { background:var(--hf-blue-50); }

/* ---- photo slot ---- */
.photo-slot { display:flex; gap:.9rem; align-items:flex-start; }
.photo-thumb { width:120px; height:80px; border-radius:.6rem; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid #e5e7eb; }
.photo-thumb.square { width:72px; height:72px; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---- list "announce" toggle (Posts list) ---- */
.chip-toggle { border:0; cursor:pointer; font-size:.75rem; }

/* ---- brand: links that used Tailwind's generic blue, and the unread dot */
.text-blue-600 { color:var(--hf-blue); }
.text-blue-600:hover { color:var(--hf-blue-dark); }

/* ---- media picker + document grid builder (blog-media.js) ---- */
.mm-back { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; }
.mm-back.top { z-index:70; }
.mm-dialog { background:#fff; color:#111827; border-radius:16px; box-shadow:0 25px 50px -12px rgba(0,0,0,.45); width:100%; max-width:860px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; overflow:hidden; }
.mm-dialog.wide { max-width:1240px; height:calc(100vh - 32px); }
.mm-head, .mm-foot { display:flex; align-items:center; gap:.75rem; padding:.9rem 1.25rem; }
.mm-head { border-bottom:1px solid #e5e7eb; justify-content:space-between; }
.mm-foot { border-top:1px solid #e5e7eb; justify-content:flex-end; }
.mm-head h3 { font-size:1rem; font-weight:700; margin:0; }
.mm-head small { display:block; color:#6b7280; font-weight:400; font-size:.75rem; }
.mm-body { padding:1rem 1.25rem; overflow:auto; flex:1; min-height:0; }
.mm-tabs { display:flex; gap:.25rem; margin-bottom:.9rem; border-bottom:1px solid #e5e7eb; }
.mm-tab { padding:.5rem .9rem; font-size:.85rem; font-weight:600; color:#6b7280; border:0; background:none; border-bottom:2px solid transparent; cursor:pointer; }
.mm-tab.on { color:var(--hf-blue); border-bottom-color:var(--hf-blue); }
.mm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.75rem; }
.mm-tile { border:1px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden; text-align:left; cursor:pointer; padding:0; display:flex; flex-direction:column; }
.mm-tile:hover, .mm-tile:focus-visible { border-color:var(--hf-blue); box-shadow:0 0 0 3px rgba(11,108,181,.15); outline:none; }
.mm-thumb { aspect-ratio:4/3; background:var(--hf-blue-50); display:flex; align-items:center; justify-content:center; color:var(--hf-blue); font-size:2rem; overflow:hidden; }
.mm-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mm-cap { padding:.45rem .6rem; font-size:.75rem; line-height:1.25; }
.mm-cap b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-cap span { color:#6b7280; }
.mm-drop { border:2px dashed #cbd5e1; border-radius:14px; padding:2rem 1rem; text-align:center; color:#475569; background:#f8fafc; cursor:pointer; display:block; }
.mm-drop.over, .mm-drop:hover { border-color:var(--hf-blue); background:var(--hf-blue-50); }
.mm-drop i { font-size:1.8rem; color:var(--hf-blue); display:block; margin-bottom:.4rem; }
.mm-note { font-size:.8rem; color:#6b7280; }
.mm-err { color:#b91c1c; font-size:.85rem; margin-top:.6rem; }
.mm-split { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:1rem; height:100%; min-height:0; }
.mm-split > * { min-height:0; overflow:auto; }
@media (max-width:980px) { .mm-split { grid-template-columns:1fr; } .mm-dialog.wide { height:auto; } }
.mm-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.9rem; }
.mm-group { border:1px solid #e5e7eb; border-radius:14px; padding:.75rem; margin-bottom:.9rem; background:#fafafa; }
.mm-group-head { display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.mm-group-head input { flex:1; font-weight:600; }
.mm-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem; min-height:60px; }
.mm-item { border:1px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden; position:relative; }
.mm-item.sel { border-color:var(--hf-blue); box-shadow:0 0 0 3px rgba(11,108,181,.2); }
.mm-item .mm-thumb { aspect-ratio:3/4; cursor:grab; font-size:1.6rem; }
.mm-item .mm-thumb img { object-fit:cover; }
.mm-badge { position:absolute; top:6px; left:6px; background:rgba(2,80,125,.9); color:#fff; font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:99px; }
.mm-badge.warn { background:#b45309; left:auto; right:6px; }
.mm-item-title { padding:.35rem .5rem 0; font-size:.75rem; font-weight:600; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.1em; }
.mm-item-btns { display:flex; justify-content:space-between; padding:.25rem .35rem .4rem; }
.mm-ib { border:0; background:none; color:#475569; padding:.25rem .4rem; border-radius:6px; cursor:pointer; font-size:.8rem; }
.mm-ib:hover { background:var(--hf-blue-50); color:var(--hf-blue); }
.mm-ib.danger:hover, .mm-ib.armed { background:#fee2e2; color:var(--hf-crimson); }
.mm-ghost { opacity:.35; }
.mm-side { border:1px solid #e5e7eb; border-radius:14px; padding:.9rem; background:#fff; }
.mm-side h4 { margin:0 0 .6rem; font-size:.9rem; font-weight:700; }
.mm-preview { width:100%; height:520px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.mm-warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:10px; padding:.55rem .75rem; font-size:.78rem; margin-bottom:.6rem; }
.mm-warn ul { margin:.25rem 0 0 1rem; list-style:disc; }
.mm-progress { font-size:.8rem; margin:.25rem 0; display:flex; gap:.5rem; align-items:center; }
.mm-progress .bad { color:#b45309; }
[data-theme="dark"] .mm-dialog { background:#1f2937; color:#e5e7eb; }
[data-theme="dark"] .mm-head, [data-theme="dark"] .mm-foot, [data-theme="dark"] .mm-tabs { border-color:#374151; }
[data-theme="dark"] .mm-tile, [data-theme="dark"] .mm-item, [data-theme="dark"] .mm-side { background:#111827; border-color:#374151; }
[data-theme="dark"] .mm-group { background:#18212f; border-color:#374151; }
[data-theme="dark"] .mm-drop { background:#111827; border-color:#4b5563; color:#cbd5e1; }