/* ═══ IT Live CMS — Admin Bar Styles ═══ */
/* Loaded from api.itlive.nl/cms/admin-bar.css */

#itlAdminBar{position:fixed;top:0;left:0;right:0;height:36px;background:linear-gradient(180deg,#23272f,#1a1e25);z-index:99999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:13px;color:#c3c8d0;box-shadow:0 1px 4px rgba(0,0,0,.35);user-select:none;-webkit-font-smoothing:antialiased}
.ab-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 10px;max-width:100%}
.ab-left,.ab-right{display:flex;align-items:center;gap:1px}
.ab-item{display:inline-flex;align-items:center;gap:5px;padding:0 9px;height:36px;color:#c3c8d0;text-decoration:none;font-size:12px;font-weight:500;white-space:nowrap;border:none;background:none;cursor:pointer;transition:background .12s,color .12s;line-height:1;font-family:inherit}
.ab-item:hover{background:rgba(255,255,255,.08);color:#fff}
.ab-item svg{opacity:.7;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}
.ab-item:hover svg{opacity:1}
.ab-logo{font-weight:700;color:#e8eaed;padding-left:4px}
.ab-logo:hover{color:#ff6b35}.ab-logo:hover svg{stroke:#ff6b35;opacity:1}
.ab-toggle.active{background:rgba(255,107,53,.18)!important;color:#ff6b35!important}
.ab-toggle.active svg{stroke:#ff6b35;opacity:1}
.ab-sep{width:1px;height:18px;background:rgba(255,255,255,.1);margin:0 4px}
.ab-user{cursor:default;opacity:.7;font-size:11px}
.ab-logout:hover{color:#ff6b35!important}
body.has-admin-bar{padding-top:36px!important}
body.has-admin-bar .top-bar,body.has-admin-bar nav{top:36px}

/* ── Slide-out Panel ─── */
.abpanel-overlay{position:fixed;inset:0;top:36px;background:rgba(0,0,0,.3);z-index:99998;backdrop-filter:blur(2px)}
.abpanel-drawer{position:absolute;top:0;right:0;width:380px;max-width:90vw;height:100%;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,.15);display:flex;flex-direction:column;animation:abSlideIn .2s ease}
@keyframes abSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.abpanel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.abpanel-body{flex:1;overflow-y:auto}

/* ── Live edit ─── */
.ab-editable-hover{outline:2px dashed rgba(255,107,53,.5)!important;outline-offset:2px;cursor:text!important}
.ab-img-hover{outline:2px dashed rgba(59,130,246,.6)!important;outline-offset:2px;cursor:pointer!important}
[contenteditable="true"].ab-editing{outline:2px solid #ff6b35!important;outline-offset:2px;cursor:text!important;min-height:1em;background:rgba(255,107,53,.04);border-radius:3px}

/* ── Toast ─── */
.ab-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e293b;color:#fff;padding:10px 22px;border-radius:10px;font-size:13px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;z-index:100002;opacity:0;pointer-events:none;transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.ab-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Media Picker ─── */
.abmp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100001;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.abmp-modal{background:#fff;border-radius:16px;width:90vw;max-width:860px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.abmp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}
.abmp-header h3{margin:0;font-size:1rem;font-weight:700}
.abmp-close{background:none;border:none;font-size:20px;cursor:pointer;color:#64748b;padding:4px 8px;border-radius:6px}
.abmp-close:hover{background:#f1f5f9;color:#1e293b}
.abmp-upload-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:#ff6b35;color:#fff;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.abmp-upload-btn:hover{filter:brightness(1.1)}
.abmp-search{padding:10px 20px}
.abmp-search input{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none;box-sizing:border-box}
.abmp-search input:focus{border-color:#ff6b35;box-shadow:0 0 0 2px rgba(255,107,53,.1)}
.abmp-grid{flex:1;overflow-y:auto;padding:8px 20px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.abmp-item{border:2px solid #e2e8f0;border-radius:10px;overflow:hidden;cursor:pointer;transition:all .12s;position:relative}
.abmp-item:hover{border-color:#ff6b35;transform:scale(1.02)}
.abmp-item.selected{border-color:#ff6b35;box-shadow:0 0 0 2px rgba(255,107,53,.3)}
.abmp-item.selected::after{content:'✓';position:absolute;top:6px;right:6px;background:#ff6b35;color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.abmp-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.abmp-name{padding:4px 6px;font-size:10px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abmp-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #e2e8f0;background:#f8fafc}
.abmp-insert-btn{padding:8px 20px;background:#ff6b35;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.abmp-insert-btn:disabled{opacity:.4;cursor:not-allowed}
.abmp-insert-btn:not(:disabled):hover{filter:brightness(1.1)}

/* ── Page Creator ─── */
.abp-steps{padding:16px}
.abp-step{display:none}.abp-step.active{display:block}
.abp-section{margin-bottom:14px}
.abp-label{display:block;font-size:12px;font-weight:700;color:#1e293b;margin-bottom:5px}
.abp-input{width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;font-size:12px;outline:none;font-family:inherit;box-sizing:border-box}
.abp-input:focus{border-color:#ff6b35;box-shadow:0 0 0 2px rgba(255,107,53,.08)}
.abp-textarea{width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;font-size:12px;outline:none;min-height:50px;resize:vertical;font-family:inherit;box-sizing:border-box}
.abp-template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.abp-tpl{padding:12px 8px;border:2px solid #e2e8f0;border-radius:10px;text-align:center;cursor:pointer;transition:all .12s}
.abp-tpl:hover{border-color:#ff6b35}
.abp-tpl.selected{border-color:#ff6b35;background:rgba(255,107,53,.05)}
.abp-tpl-icon{font-size:1.6rem;margin-bottom:4px}
.abp-tpl-name{font-size:11px;font-weight:700;color:#334155}
.abp-btn-sm{padding:6px 10px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;cursor:pointer}
.abp-btn-sm:hover{background:#ff6b35;color:#fff;border-color:#ff6b35}
.abp-btn-next{width:100%;padding:10px;background:#ff6b35;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;margin-top:8px}
.abp-btn-next:hover{filter:brightness(1.1)}
.abp-btn-back{padding:10px 16px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:#334155}
.abp-widget-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.abp-widget-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}
.abp-widget-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.abp-widget-head span{font-size:12px;font-weight:700;color:#1e293b}
.abp-widget-actions{display:flex;gap:4px}
.abp-widget-actions button{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px}
.abp-widget-actions button:hover{background:#e2e8f0}
.abp-widget-btns{display:flex;gap:6px;flex-wrap:wrap}
.abp-wbtn{padding:6px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s}
.abp-wbtn:hover{border-color:#ff6b35;background:rgba(255,107,53,.05)}

/* ── Menu Editor ─── */
.abm-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 380px);overflow-y:auto}
.abm-item{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}
.abm-item-label{flex:1;font-size:12px;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abm-item-url{font-size:10px;color:#94a3b8;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abm-item button{background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px}
.abm-item button:hover{background:#e2e8f0}
.abm-sub{margin-left:16px;font-size:11px;color:#64748b;font-style:italic}

/* ── Responsive ─── */
@media(max-width:768px){
  .ab-item span{display:none}.ab-item{padding:0 7px}.ab-logo span{display:inline}.ab-user{display:none}.ab-sep{display:none}
  .abpanel-drawer{width:100vw;max-width:100vw}
}