/* Fix admin bar position */


/* Fix blog content position */
.blog-wrapper,
.blog-content,
.post {
    margin-left: 10px; /* same as sidebar width */
}
/* Push the entire blog area to the right */
#content {
    margin-left: 280px; /* match your left sidebar width */
}

.create-post-form {
    margin-left: 100px; /* match your sidebar */
    width: 60%;
}

.create-post-form input,
.create-post-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

.create-post-form button {
    padding: 10px 20px;
    background: #0ff;
    border: none;
    cursor: pointer;
}

/* Neon blog cards */
.post {
    background: rgba(0,0,0,0.6);
    border: 2px solid #0ff;
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
    box-shadow: 0 0 10px #0ff;
}

.post h2 {
    color: #0ff;
    margin-bottom: 10px;
}

.post .date {
    color: #aaa;
    font-size: 0.9em;
}

.post .body {
    color: #fff;
    line-height: 1.6em;
}

/* Manage posts list */
.manage-post-item {
    background: rgba(0,0,0,0.5);
    border-left: 3px solid #0ff;
    padding: 10px;
    margin: 10px 0;
}

.manage-controls a {
    color: #0ff;
    margin-right: 10px;
}

.admin-toolbar {
    position: fixed;
    top: 10px;
    right: 20px;
    background: rgba(0,0,0,0.7);
    padding: 10px 15px;
    border: 2px solid #0ff;
    border-radius: 6px;
    box-shadow: 0 0 10px #0ff;
    z-index: 9999;
}

.admin-toolbar a {
    color: #0ff;
    margin-right: 10px;
}

.success-banner {
    background: #0f0;
    color: #000;
    padding: 12px 20px;
    margin-left: 220px; /* match sidebar offset */
    margin-top: 10px;
    border-radius: 4px;
    font-weight: bold;
    width: fit-content;
    box-shadow: 0 0 10px #0f0;
    animation: fadeOut 3s forwards;
}

/* Fade out after 3 seconds */
@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; display: none; }
}


.blog-page {
    margin-left: 260px;
	margin-right: 260px;    
    padding: 20px;
}

.create-post-form {
    background: rgba(0,0,0,0.6);
    border: 2px solid #0ff;
    padding: 20px;
    border-radius: 6px;
    width: 70%;
    box-shadow: 0 0 10px #0ff;
}

.create-post-form input,
.create-post-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    background: #111;
    border: 1px solid #0ff;
    color: #0ff;
}

.create-post-form button {
    padding: 10px 20px;
    background: #0ff;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    font-weight: bold;
}

#editor {
    background: #111;
    color: #0ff;
    border: 2px solid #0ff;
    min-height: 200px;
    padding: 10px;
    box-shadow: 0 0 10px #0ff;
}

.ql-toolbar {
    border: 2px solid #0ff !important;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 0 10px #0ff;
}

.ql-container {
    border: none !important;
}

/* Make Quill editor text white + Verdana */
#editor .ql-editor {
    color: #fff !important;
    font-family: Verdana, sans-serif !important;
}

/* Make placeholder text white too */
#editor .ql-editor.ql-blank::before {
    color: #bbb !important;
    font-family: Verdana, sans-serif !important;
}

/* Toolbar buttons use Verdana for dropdowns */
.ql-toolbar .ql-picker-label,
.ql-toolbar .ql-picker-item {
    color: #0ff !important;
    font-family: Verdana, sans-serif !important;
}

/* Toolbar buttons (bold, italic, underline, lists, etc.) */
.ql-toolbar button svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Dropdown labels (Normal, Header, etc.) */
.ql-toolbar .ql-picker-label {
    color: #fff !important;
    font-family: Verdana, sans-serif !important;
}

/* Dropdown items */
.ql-toolbar .ql-picker-item {
    color: #fff !important;
    font-family: Verdana, sans-serif !important;
}

/* Fix for Quill icons that use fill instead of stroke */
.ql-toolbar .ql-stroke {
    stroke: #fff !important;
}

.ql-toolbar .ql-fill {
    fill: #fff !important;
}