/*
* File: admin/assets/blog.css
*
* Purpose
* -------
* Styles for the Blog area (0.47): the workspace at /blog (collection tabs, category rail, quick post,
* status filters, search, post rows with an inline date picker and a More menu, the bulk bar) and
* the post maker at /post (Category and Date side by side, Publish / Save draft buttons). Moved out of admin.css so the Blog screens own
* their look in one file.
*
* Communication / relationships
* -----------------------------
* Linked on every admin page by admin/screens/layout.shell() after admin.css and appearance.css, and
* served as /static/blog.css by admin/server.py. Classes come from admin/screens/posts.py; colours,
* corners, and fonts come from the workspace variables in appearance.css (--ui-*), so Workspace
* appearance settings (dark or light, accent, corners) apply here too.
*
* Settings / parameters
* ---------------------
* The workspace is two columns (category rail 230px, then the list) above 900px and one column
* below it. Row actions stay on one line on wide screens and wrap under the title on phones.
*
* Edge cases
* ----------
* The bulk bar and the new-category box use the hidden attribute; [hidden] is forced to display:none
* here because both elements also set display. A long title wraps instead of pushing the actions off
* screen. The More menu is a details element, so it works without JavaScript and closes on a second
* click.
*
* Known limitations
* -----------------
* The More menu does not close when clicking elsewhere; it closes when another action reloads the page.
*
* Examples
* --------
* ::
*
* PCT9
* ...
*/
.bloghead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.bloghead h1{margin:0}.bloghead p{margin:4px 0 0;color:var(--ui-muted,#999)}.bloghead .actions{display:flex;gap:8px}
.blogtabs{display:flex;gap:4px;border-bottom:1px solid var(--ui-border,#333);margin:0 0 18px}
.blogtab{padding:9px 14px;color:var(--ui-muted,#aaa);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.blogtab small{color:var(--ui-muted,#888);font-weight:400;margin-left:4px}.blogtab:hover{color:var(--ui-text,#fff)}
.blogtab.active{color:var(--ui-text,#fff);border-bottom-color:var(--ui-accent,#4da3ff)}
.bloggrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.blograil{position:sticky;top:12px;background:var(--ui-panel,#181818);border:1px solid var(--ui-border,#2a2a2a);border-radius:var(--ui-radius,6px);padding:14px}
.blograil h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--ui-muted,#999);margin:0 0 8px}
.blogcats{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.blogcat{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;border-radius:calc(var(--ui-radius,6px) - 4px);color:var(--ui-text,#ddd);text-decoration:none}
.blogcat small{color:var(--ui-muted,#888)}.blogcat:hover{background:var(--ui-input,#222)}
.blogcat.active{background:var(--ui-accent,#4da3ff);color:var(--ui-on-accent,#111)}.blogcat.active small{color:inherit;opacity:.8}
.blograil .minirow{display:flex;gap:6px;margin:6px 0}.blograil .minirow input{flex:1;min-width:0;padding:6px 8px}
.catmanage{margin-top:8px}.catmanage summary{cursor:pointer;color:var(--ui-muted,#bbb);font-size:13px}
.catrows{list-style:none;margin:6px 0;padding:0}.catrows li{border-top:1px solid var(--ui-border,#262626)}.catrows .minirow{flex-wrap:wrap}
.quickpost{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.quickpost .quicktitle{font-size:18px;font-weight:600}.quickpost textarea{resize:vertical}
.quickbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.quickbuttons{display:flex;gap:8px;margin-left:auto}
.quickdate{display:inline-flex;align-items:center;gap:8px;margin:0}.quickdate span{color:var(--ui-muted,#999);font-size:13px}.quickdate input{padding:7px 9px}
.quickwhere{color:var(--ui-muted,#aaa);font-size:13px}.quickwhere b{color:var(--ui-text,#fff)}.quickwhere .muted{opacity:.8}
.postrow-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}.postrow-meta small{display:inline}
.rowdate{display:inline-flex;gap:4px;margin:0}body .postrow form.rowdate input[type=date][data-autosubmit-date]{width:auto;min-width:0;height:auto;padding:1px 4px;font-size:12px;line-height:1.4;background:transparent;border:1px solid transparent;color:var(--ui-muted,#aaa);border-radius:4px;box-shadow:none}
body .postrow form.rowdate input[type=date][data-autosubmit-date]:hover,body .postrow form.rowdate input[type=date][data-autosubmit-date]:focus{border-color:var(--ui-border,#444);color:var(--ui-text,#fff)}.rowdate [hidden]{display:none}
.makerrow{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}.makerdate input{width:100%}
@media(max-width:640px){.makerrow{grid-template-columns:1fr}.quickbuttons{margin-left:0}}
.catpick{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}.catpick select{min-width:200px}
.catpick [hidden],.bulkbar[hidden]{display:none!important}
.blogtools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.statuspills{display:flex;gap:6px;flex-wrap:wrap}
.statuspill{padding:5px 12px;border:1px solid var(--ui-border,#333);border-radius:999px;color:var(--ui-muted,#ccc);text-decoration:none;font-size:13px}
.statuspill small{opacity:.75}.statuspill:hover{color:var(--ui-text,#fff)}
.statuspill.active{background:var(--ui-text,#eee);border-color:var(--ui-text,#eee);color:var(--ui-bg,#111)}
.blogsearch{display:flex;gap:6px}.blogsearch input{width:200px}
.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin:0 0 8px;border:1px solid var(--ui-accent,#4da3ff);border-radius:var(--ui-radius,6px)}
.postlist{display:flex;flex-direction:column;gap:6px}
.postrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px}
.postrow-main{min-width:0}.postrow-title{display:block;color:var(--ui-text,#fff);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.postrow-title:hover{text-decoration:underline}.postrow-main small{display:block;color:var(--ui-muted,#888)}
.postrow-actions{display:flex;gap:6px;align-items:center}.postrow-actions form{margin:0}
.badge.scheduled{background:#14202b;color:#9cc8ee}.badge.pinned{background:#3a2f12;color:#f2d98a}
.postrow .badges{display:flex;gap:6px;align-items:center}.moveto{display:inline-flex;gap:6px;align-items:center}.moveto select{padding:5px 8px}
.rowmenu{position:relative}.rowmenu>summary{list-style:none;cursor:pointer;padding:6px 10px;border-radius:3px;background:var(--ui-input,#252525);font-size:13px}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:140px;display:flex;flex-direction:column;padding:6px;
background:var(--ui-panel,#1c1c1c);border:1px solid var(--ui-border,#333);border-radius:var(--ui-radius,6px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.rowmenu-list a,.rowmenu-list .linkish{display:block;width:100%;text-align:left;padding:7px 9px;background:none;color:var(--ui-text,#ddd);font-weight:400;text-decoration:none;border-radius:3px}
.rowmenu-list a:hover,.rowmenu-list .linkish:hover{background:var(--ui-input,#262626)}.rowmenu-list .linkish.danger{color:#ff9b9b}
.blogempty{padding:28px;text-align:center}
.postmaker .postbuttons{margin:18px 0 6px;gap:10px}.postmaker .postbuttons button{min-width:120px}
@media(max-width:900px){.bloggrid{grid-template-columns:1fr}.blograil{position:static}}
@media(max-width:640px){.postrow{grid-template-columns:auto minmax(0,1fr)}.postrow .badges{grid-column:2}.postrow-actions{grid-column:1/-1;flex-wrap:wrap}.blogsearch input{width:100%}}