/* =========================================================
   BLOG ADMIN
========================================================= */

.admin-blog-layout{
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(340px,.75fr);
gap:24px;
align-items:start;
}

.admin-blog-editor-panel,
.admin-blog-archive-panel{
min-width:0;
}

.admin-blog-archive-panel{
position:sticky;
top:110px;
max-height:calc(100vh - 140px);
display:flex;
flex-direction:column;
}

.admin-blog-form{
display:grid;
gap:24px;
}

.admin-blog-slug-row{
display:flex;
align-items:center;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.035);
}

.admin-blog-slug-row span{
padding:0 0 0 16px;
color:rgba(255,255,255,.45);
white-space:nowrap;
}

.admin-blog-slug-row input{
border:0 !important;
background:transparent !important;
}

.admin-field-help{
display:block;
margin-top:7px;
color:rgba(255,255,255,.45);
font-size:.78rem;
line-height:1.5;
}

/* COVER */

.admin-blog-cover-dropzone{
position:relative;
min-height:220px;
display:grid;
place-items:center;
border:1px dashed rgba(255,82,70,.65);
background:rgba(255,255,255,.025);
overflow:hidden;
cursor:pointer;
transition:
border-color .2s ease,
background .2s ease;
}

.admin-blog-cover-dropzone:hover,
.admin-blog-cover-dropzone:focus-visible{
border-color:#ff5246;
background:rgba(255,82,70,.045);
outline:none;
}

.admin-blog-cover-empty{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
padding:40px;
text-align:center;
}

.admin-blog-cover-empty strong{
color:#fff;
}

.admin-blog-cover-empty span{
color:rgba(255,255,255,.52);
font-size:.85rem;
}

.admin-blog-cover-preview{
position:absolute;
inset:0;
}

.admin-blog-cover-preview img{
width:100%;
height:100%;
object-fit:cover;
}

.admin-blog-cover-remove{
position:absolute;
right:14px;
bottom:14px;
padding:10px 16px;
border:1px solid rgba(255,255,255,.22);
background:rgba(0,0,0,.8);
color:#fff;
font:inherit;
font-size:.85rem;
cursor:pointer;
}

/* EDITOR */

.admin-blog-editor{
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.025);
}

.admin-blog-toolbar{
display:flex;
flex-wrap:wrap;
gap:7px;
padding:10px;
border-bottom:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.035);
}

.admin-blog-toolbar button{
min-width:38px;
height:38px;
padding:0 11px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.04);
color:#fff;
font:inherit;
font-size:.8rem;
cursor:pointer;
transition:
background .2s ease,
border-color .2s ease;
}

.admin-blog-toolbar button:hover{
background:rgba(255,255,255,.1);
border-color:rgba(255,255,255,.24);
}

.admin-blog-content{
min-height:440px;
padding:26px;
color:#eee;
font-size:1rem;
line-height:1.8;
outline:none;
overflow-wrap:anywhere;
}

.admin-blog-content:empty::before{
content:attr(data-placeholder);
color:rgba(255,255,255,.34);
pointer-events:none;
}

.admin-blog-content h2{
margin:32px 0 14px;
font-size:2rem;
line-height:1.15;
color:#fff;
}

.admin-blog-content h3{
margin:26px 0 12px;
font-size:1.45rem;
line-height:1.2;
color:#fff;
}

.admin-blog-content p{
margin:0 0 18px;
}

.admin-blog-content ul,
.admin-blog-content ol{
margin:0 0 20px;
padding-left:26px;
}

.admin-blog-content a{
color:#ff6258;
}

.admin-blog-form-actions{
display:flex;
justify-content:flex-end;
gap:12px;
padding-top:4px;
}

/* FILTRI */

.admin-blog-filters{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:10px;
margin-bottom:18px;
}

.admin-blog-filters input,
.admin-blog-filters select{
width:100%;
min-height:44px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
color:#fff;
font:inherit;
}

.admin-blog-filters option{
background:#1d1d1d;
}

/* ARCHIVIO */

.admin-blog-list{
display:grid;
gap:12px;
overflow:auto;
padding-right:4px;
}

.admin-blog-row{
display:grid;
grid-template-columns:82px minmax(0,1fr);
gap:14px;
padding:12px;
border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.025);
}

.admin-blog-row-cover{
width:82px;
height:82px;
background:#171717;
overflow:hidden;
}

.admin-blog-row-cover img{
width:100%;
height:100%;
object-fit:cover;
}

.admin-blog-row-main{
min-width:0;
display:flex;
flex-direction:column;
gap:5px;
}

.admin-blog-row-main strong{
color:#fff;
line-height:1.3;
}

.admin-blog-row-main > span{
color:rgba(255,255,255,.56);
font-size:.82rem;
}

.admin-blog-row-main > small{
max-width:100%;
overflow:hidden;
color:rgba(255,255,255,.35);
font-size:.72rem;
text-overflow:ellipsis;
white-space:nowrap;
}

.admin-blog-row-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}

.admin-blog-row-heading small{
color:rgba(255,255,255,.42);
font-size:.7rem;
white-space:nowrap;
}

.admin-blog-status{
display:inline-flex;
align-items:center;
width:max-content;
padding:4px 8px;
border:1px solid rgba(255,255,255,.13);
color:rgba(255,255,255,.7);
font-size:.66rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}

.admin-blog-status.is-published{
border-color:rgba(73,194,115,.45);
color:#72d697;
}

.admin-blog-status.is-scheduled{
border-color:rgba(239,178,62,.45);
color:#f0bf62;
}

.admin-blog-status.is-draft{
color:rgba(255,255,255,.52);
}

.admin-blog-row-actions{
grid-column:1 / -1;
display:flex;
justify-content:flex-end;
gap:16px;
padding-top:10px;
border-top:1px solid rgba(255,255,255,.07);
}

.admin-blog-empty{
padding:40px 20px;
border:1px dashed rgba(255,255,255,.1);
color:rgba(255,255,255,.45);
text-align:center;
}

/* RESPONSIVE */

@media (max-width:1180px){

.admin-blog-layout{
grid-template-columns:1fr;
}

.admin-blog-archive-panel{
position:static;
max-height:none;
}

.admin-blog-list{
overflow:visible;
}

}

@media (max-width:680px){

.admin-blog-filters{
grid-template-columns:1fr;
}

.admin-blog-form-actions{
flex-direction:column-reverse;
}

.admin-blog-form-actions .admin-button{
width:100%;
}

.admin-blog-content{
min-height:360px;
padding:18px;
}

.admin-blog-toolbar{
gap:5px;
}

.admin-blog-toolbar button{
min-width:36px;
padding:0 9px;
}

}