/* Algemene reset voor padding en margin */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #F5F5F5; /* Lichte grijze achtergrond */
    color: #34495E; /* Lichter donkerblauw voor de tekstkleur */
    line-height: 1.5; /* Slightly reduced for a tighter feel */
    min-height: 100vh; /* Zorg ervoor dat de pagina altijd minstens de hoogte van het scherm heeft */
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    background-color: #3498DB; /* Lichter blauw */
    color: white;
    padding: 30px 0;
    text-align: center;
    border-bottom: 4px solid #F39C12; /* Subtiele oranje lijn onder de header */
}

header h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

/* Navigatie */
nav {
    background-color: #ECF0F1; /* Lichte grijsblauwe achtergrond */
    width: 100%;
    border-radius: 25px; /* Ronde hoeken voor de navigatie */
    margin: 20px 0;
}

nav ul {
    list-style: none;
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    text-decoration: none;
    color: #3498DB; /* Lichter blauw voor de tekstkleur */
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    background-color: #F39C12; /* Oranje achtergrondkleur bij hover */
    color: white; /* Witte tekstkleur bij hover */
    transform: scale(1.05); /* Kleine vergroting bij hover */
}

/* Main content area */
main {
    padding: 40px 20px;
    text-align: center;
    flex: 1; /* Zorg ervoor dat de inhoud de beschikbare ruimte in de pagina opvult */
}

/* Footer */
footer {
    background-color: #3498DB;
    color: white;
    padding: 20px;
    text-align: center;
    border-top: 4px solid #F39C12; /* Subtiele oranje lijn boven de footer */
    margin-top: auto; /* Zorg ervoor dat de footer altijd onderaan komt */
}

footer p {
    font-size: 1rem;
}

/* Responsief ontwerp voor kleinere schermen */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    nav ul {
        flex-direction: column; /* Maak het menu verticaal voor mobiele schermen */
    }

    nav ul li {
        margin: 10px 0; /* Verklein de marge tussen de items */
    }
}

/* --- General Content Section Styling --- */
/* This can be used for pages like 'About Me' to give them a consistent background */
.content-section {
    max-width: 1200px; /* Adjust as needed for your About Me content */
    margin: 40px auto; /* Center the content */
    padding: 30px;
    background-color: #ECF0F1; /* Light grayish-blue background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    color: #34495E; /* Standard text color */
}

.content-section h1, .content-section h2, .content-section h3 {
    color: #3498DB; /* Consistent heading color */
    text-align: center;
    margin-bottom: 20px;
}

.content-section p {
    font-size: 1em;
    line-height: 1.5; /* Consistent with body line-height */
    margin-bottom: 1em; /* This is the general paragraph spacing, will be overridden for article-content below */
}

/* --- Contact Form Styling (for contact.php) --- */

.contact-form {
    max-width: 600px; /* Limit the width of the form for better readability */
    margin: 40px auto; /* Center the form and add vertical margin */
    padding: 30px;
    background-color: #ECF0F1; /* Light grayish-blue background, similar to nav */
    border-radius: 10px; /* Rounded corners for the form container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: left; /* Align text within the form to the left */
}

.contact-form h1 {
    font-size: 2em; /* Slightly smaller than header H1 */
    color: #3498DB; /* Lighter blue, matching header/nav links */
    text-align: center; /* Center the heading */
    margin-bottom: 30px;
}

.contact-form p {
    font-size: 1.1em;
    color: #34495E; /* Main text color */
    margin-bottom: 20px;
    text-align: center; /* Center introductory text */
}

.contact-form .form-group {
    margin-bottom: 20px; /* Space between form groups */
}

.contact-form label {
    display: block; /* Make labels take their own line */
    font-weight: bold;
    color: #34495E; /* Main text color */
    margin-bottom: 8px; /* Space between label and input */
    font-size: 0.95em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="subject"], /* Added styling for subject field */
.contact-form textarea {
    width: 100%; /* Full width within the form group */
    padding: 12px 15px;
    border: 1px solid #BDC3C7; /* Light gray border */
    border-radius: 5px; /* Rounded corners for input fields */
    font-size: 1em;
    color: #34495E;
    background-color: #FFFFFF; /* White background for inputs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="subject"]:focus,
.contact-form textarea:focus {
    border-color: #3498DB; /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); /* Subtle blue glow on focus */
    outline: none; /* Remove default outline */
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing, but not horizontal */
    min-height: 120px; /* Minimum height for the textarea */
}

/* Success and Error Messages */
.contact-form .success-message {
    color: #27AE60; /* Green for success */
    background-color: #D4EDDA; /* Light green background */
    border: 1px solid #27AE60;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.contact-form .error-message {
    color: #C0392B; /* Red for error */
    background-color: #FADBD8; /* Light red background */
    border: 1px solid #C0392B;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

/* Align button to center for forms */
.contact-form .button {
    display: block; /* Make the button a block element to center it */
    margin: 20px auto 0 auto; /* Center horizontally */
    width: auto; /* Allow button to size to content */
    padding: 12px 30px; /* Adjust padding for button */
    font-size: 1.1em;
    /* Inherits colors from existing .button style in style.css */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .contact-form {
        margin: 20px 15px; /* Adjust margins for smaller screens */
        padding: 20px;
    }

    .contact-form h1 {
        font-size: 1.8em;
    }

    .contact-form .button {
        width: 100%; /* Full width button on very small screens */
    }
}
/* --- Messages List Styling (for messages.php) --- */

.messages-list {
    max-width: 600px; /* Further reduced from 700px to 600px */
    margin: 30px auto; /* Slightly reduced margin */
    padding: 25px; /* Slightly reduced padding */
    background-color: #ECF0F1; /* Light grayish-blue background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.messages-list h1 {
    font-size: 2em;
    color: #3498DB;
    text-align: center;
    margin-bottom: 30px;
}

.messages-list .info-message {
    font-size: 1.1em;
    color: #34495E;
    text-align: center;
    padding: 15px;
    background-color: #D6EAF8; /* Light blue for info */
    border: 1px solid #85C1E9;
    border-radius: 5px;
    margin-bottom: 20px;
}

.messages-list .error-message {
    /* Inherits from .contact-form .error-message or similar */
    text-align: center;
    margin-bottom: 20px;
}

.message-card {
    background-color: #FFFFFF; /* White background for each message */
    border: 1px solid #BDC3C7; /* Light gray border */
    border-radius: 8px;
    padding: 8px 12px; /* Reduced vertical padding from 12px to 8px */
    margin-bottom: 10px; /* Reduced from 12px for closer cards */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow for cards */
}

.message-card h2 {
    font-size: 1.5em;
    color: #2C3E50; /* Darker blue for subject */
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ECF0F1; /* Separator under subject */
    padding-bottom: 10px;
}

.message-card p {
    font-size: 1em;
    color: #34495E;
    line-height: 1.6;
    margin-bottom: 10px;
}

.message-card .message-body {
    background-color: #F8F9F9; /* Very light gray for message content */
    border-left: 4px solid #3498DB; /* Blue left border */
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    white-space: pre-wrap; /* Preserves whitespace and line breaks */
    font-family: monospace; /* Monospace for consistency with original format */
}

.message-card .message-timestamp {
    font-size: 0.9em;
    color: #7F8C8D; /* Gray for timestamp */
    text-align: right;
    margin-top: 15px;
    margin-bottom: 0px; /* Removed default bottom margin */
    border-top: 1px dashed #ECF0F1; /* Dashed line above timestamp */
    padding-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 800px) {
    .messages-list {
        margin: 20px 15px;
        padding: 20px;
    }
}
/* --- Read/Unread Styling for Messages Page --- */

/* Style for unread message cards */
.unread-message-card {
    background-color: #FFFBE6 !important; /* Reverted to original light yellow, kept !important */
    border: 1px solid #FFD700 !important; /* Reverted to original border, kept !important */
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2) !important; /* Re-enabled original box-shadow with !important */
}

/* Header within message card for flexible layout */
.message-card .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Style for the 'Unread' tag */
.unread-tag {
    background-color: #F39C12; /* Orange background, matching your theme */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 15px; /* Space from the subject */
    white-space: nowrap; /* Keep tag on one line */
}

/* Container for action buttons within a message card */
.message-actions {
    display: flex; /* Use flexbox to align buttons */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Space between buttons */
    margin-top: 10px; /* Reduced from 20px to make gap smaller */
    padding-top: 15px; /* Padding above buttons */
    border-top: 1px dashed #ECF0F1; /* Dashed line above actions */
}

/* Common styling for action forms */
.message-actions .action-form {
    margin: 0; /* Remove default form margins */
}

/* Style for the 'Mark as Read' button */
.mark-read-button {
    background-color: #2ECC71; /* Green color for action */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    /* Removed display: block; margin-left: auto; as flexbox handles alignment */
}

.mark-read-button:hover {
    background-color: #27AE60; /* Darker green on hover */
}

/* Style for the 'Delete' button */
.delete-button {
    background-color: #E74C3C; /* Red color for delete */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    background-color: #C0392B;
}

/* --- Login Form Styling (for login.php) --- */
.login-form {
    max-width: 400px; /* Slightly narrower than contact form for a concise look */
    margin: 60px auto; /* More vertical margin to center it */
    padding: 30px;
    background-color: #ECF0F1; /* Consistent background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.login-form h1 {
    font-size: 2em;
    color: #3498DB;
    text-align: center;
    margin-bottom: 25px;
}

.login-form p {
    font-size: 1.1em;
    color: #34495E;
    margin-bottom: 25px;
    text-align: center;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    font-weight: bold;
    color: #34495E;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #BDC3C7;
    border-radius: 5px;
    font-size: 1em;
    color: #34495E;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    outline: none;
}

.login-form .button {
    display: block;
    margin: 20px auto 0 auto;
    width: auto;
    padding: 12px 30px;
    font-size: 1.1em;
}

/* Responsive adjustments for login form */
@media (max-width: 480px) {
    .login-form {
        margin: 40px 15px;
        padding: 20px;
    }
    .login-form .button {
        width: 100%;
    }
}
/* --- Honeypot Field Styling --- */
/* This class should be applied to the div containing the honeypot input */
.honeypot-field {
    position: absolute; /* Take it out of flow */
    left: -9999px;      /* Move it far off-screen */
    top: -9999px;       /* Move it far off-screen */
    visibility: hidden; /* Ensure it's not visible */
    opacity: 0;         /* Ensure it's transparent */
    height: 0;          /* Collapse its height */
    width: 0;           /* Collapse its width */
    overflow: hidden;   /* Hide any overflow */
    pointer-events: none; /* Prevent any interaction */
}
/* --- Knowledge Base Styling (for knowledge.php and knowledge_detail.php) --- */

.category-filter {
    text-align: center;
    margin-bottom: 30px;
    background-color: #D6EAF8; /* Light blue background for filter */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.category-filter label {
    font-size: 1.1em;
    color: #34495E;
    margin-right: 10px;
}

.category-filter select {
    padding: 8px 12px;
    border: 1px solid #BDC3C7;
    border-radius: 5px;
    font-size: 1em;
    color: #34495E;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.category-filter select:hover {
    border-color: #3498DB;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between cards */
    margin-top: 30px;
}

.article-card {
    background-color: #FFFFFF;
    border: 1px solid #BDC3C7;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
    transition: transform 0.2s ease;
}

.article-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.article-card h2 {
    font-size: 1.4em;
    color: #2C3E50;
    margin-top: 0;
    margin-bottom: 10px;
}

.article-card .article-category {
    font-size: 0.9em;
    color: #7F8C8D;
    font-weight: bold;
    margin-bottom: 10px;
}

.article-card .article-excerpt {
    font-size: 0.95em;
    color: #34495E;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow excerpt to take up available space */
}

.article-card .article-timestamp {
    font-size: 0.8em;
    color: #7F8C8D;
    text-align: right;
    margin-top: 10px;
}

.article-card .read-more-button {
    background-color: #3498DB; /* Blue button */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: none; /* Remove underline for links acting as buttons */
    display: inline-block; /* Allow padding and margin */
    margin-top: 15px;
    transition: background-color 0.3s ease;
    align-self: flex-end; /* Align button to the right */
}

.article-card .read-more-button:hover {
    background-color: #2980B9; /* Darker blue on hover */
}

/* Single Article Detail Styling */
.article-content {
    background-color: #F8F9F9;
    border-left: 4px solid #3498DB;
    padding: 10px 20px 20px 10px; /* Kept 10px left padding for some breathing room */
    margin-top: 25px;
    margin-bottom: 25px;
    /* white-space: pre-line; Removed as it can interfere with paragraph breaking */
    font-size: 1em;
    line-height: 1.5; /* Reduced from 1.7 to 1.5 for smaller vertical gap */
    color: #34495E;
    text-align: left; /* Aligned to the left */
    text-indent: 0; /* Ensures no first-line indent from CSS on the block itself */
}

/* NEW: Control spacing of paragraphs within article content */
.article-content p {
    margin-bottom: 0.2em; /* Smaller space between paragraphs */
    line-height: 1.5; /* Consistent line height within a paragraph */
}

/* Ensure list items within article content also have tight spacing */
.article-content ul,
.article-content ol {
    margin: 0.5em 0; /* Small top/bottom margin for the list itself */
    padding-left: 2em; /* Indent for list items */
}

.article-content li {
    margin-bottom: 0.2em; /* Small space between list items */
    line-height: 1.5;
}


/* Force first line of the content block to have no text-indent */
.article-content::first-line {
    text-indent: 0 !important; /* This should explicitly override any browser default or implicit indent */
}

.article-meta {
    font-size: 0.9em;
    color: #7F8C8D;
    text-align: center;
    margin-top: -15px; /* Pull up slightly closer to heading */
    margin-bottom: 20px;
}

.article-meta strong {
    color: #3498DB; /* Highlight category */
}

.back-button {
    background-color: #7F8C8D; /* Gray button */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.back-button:hover {
    background-color: #6C7A89; /* Darker gray on hover */
}

/* Responsive adjustments for knowledge base */
@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
}
/* --- Admin Panel Styling (for admin_knowledge_list.php and admin_knowledge_edit.php) --- */

.admin-panel,
.admin-form-section {
    max-width: 800px; /* Consistent width for admin sections */
    margin: 40px auto;
    padding: 30px;
    background-color: #ECF0F1; /* Light grayish-blue background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    color: #34495E;
}

.admin-panel h1,
.admin-form-section h1 {
    font-size: 2em;
    color: #3498DB;
    text-align: center;
    margin-bottom: 30px;
}

/* Admin List Specific Styles */
.admin-actions {
    text-align: center;
    margin-bottom: 30px;
}

.admin-actions .add-new-button {
    background-color: #3498DB; /* Blue for 'Add New' */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.admin-actions .add-new-button:hover {
    background-color: #2980B9;
}

.articles-management-list {
    margin-top: 20px;
}

.admin-article-item {
    background-color: #FFFFFF;
    border: 1px solid #BDC3C7;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.admin-article-item .item-details {
    flex-grow: 1; /* Take up available space */
    padding-right: 20px; /* Space from buttons */
}

.admin-article-item h3 {
    font-size: 1.3em;
    color: #2C3E50;
    margin-top: 0;
    margin-bottom: 5px;
}

.admin-article-item p {
    font-size: 0.9em;
    color: #5D6D7E;
    margin-bottom: 5px;
}

.admin-article-item .meta-info {
    font-size: 0.85em;
    color: #7F8C8D;
    margin-top: 5px;
}

.status-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 10px;
}

.status-tag.published {
    background-color: #2ECC71; /* Green */
    color: white;
}

.status-tag.unpublished {
    background-color: #F39C12; /* Orange */
    color: white;
}

.admin-article-item .item-actions {
    display: flex;
    gap: 10px; /* Space between buttons */
    flex-shrink: 0; /* Prevent actions from shrinking */
    margin-top: 10px; /* For wrap on small screens */
}

/* Specific button styles for admin actions */
.admin-article-item .edit-button {
    background-color: #5DADE2; /* Lighter blue for edit */
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.admin-article-item .edit-button:hover {
    background-color: #3498DB;
}

.admin-article-item .delete-button {
    background-color: #E74C3C; /* Red for delete */
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    background-color: #C0392B;
}

/* Admin Form Specific Styles */
.admin-form-section .form-group {
    margin-bottom: 20px;
}

.admin-form-section label {
    display: block;
    font-weight: bold;
    color: #34495E;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.admin-form-section input[type="text"],
.admin-form-section textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #BDC3C7;
    border-radius: 5px;
    font-size: 1em;
    color: #34495E;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-form-section input[type="text"]:focus,
.admin-form-section textarea:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    outline: none;
}

.admin-form-section textarea {
    resize: vertical;
    min-height: 200px; /* Larger textarea for article content */
}

.admin-form-section .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 25px;
}

.admin-form-section .checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Make checkbox slightly larger */
}

.admin-form-section .checkbox-group label {
    margin-bottom: 0; /* Remove bottom margin for label next to checkbox */
}


.admin-form-section .form-actions {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 15px;
    margin-top: 30px;
    border-top: 1px dashed #BDC3C7;
    padding-top: 20px;
}

.admin-form-section .submit-button {
    background-color: #2ECC71; /* Green for save */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.admin-form-section .submit-button:hover {
    background-color: #27AE60;
}

/* Reuse existing back-button style from knowledge_detail.php */
.admin-form-section .back-button {
    background-color: #7F8C8D; /* Gray button */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.admin-form-section .back-button:hover {
    background-color: #6C7A89; /* Darker gray on hover */
}


/* Responsive adjustments for admin forms */
@media (max-width: 800px) {
    .admin-panel,
    .admin-form-section {
        margin: 20px 15px;
        padding: 20px;
    }
}
@media (max-width: 600px) {
    .admin-article-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .admin-article-item .item-details {
        padding-right: 0;
        margin-bottom: 15px;
    }
    .admin-article-item .item-actions {
        width: 100%;
        justify-content: stretch; /* Stretch buttons */
        gap: 15px;
    }
    .admin-article-item .item-actions .button,
    .admin-article-item .item-actions form button {
        flex-grow: 1; /* Make buttons fill space */
        text-align: center;
        padding: 10px 15px;
    }
    .admin-form-section .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-form-section .submit-button,
    .admin-form-section .back-button {
        width: 100%;
    }
}
/* Basic styling for the BBCode toolbar and textarea */
.bbcode-toolbar {
    margin-bottom: 10px;
    background-color: #ecf0f1;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.bbcode-toolbar button {
    background-color: #3498DB;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.bbcode-toolbar button:hover {
    background-color: #2980B9;
}

.bbcode-toolbar button[data-tag="list"] {
    font-size: 0.8em; /* Adjust for icon-like appearance */
    line-height: 1;
}

/* Ensure textarea styling is consistent */
textarea#content {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #BDC3C7;
    border-radius: 5px;
    font-size: 1em;
    color: #34495E;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    resize: vertical;
    min-height: 200px;
    font-family: monospace; /* Important for code readability */
}

textarea#content:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    outline: none;
}

/* Styles for the rendered BBCode elements for consistency when viewing (if used elsewhere) */
.bash-display-box {
    background-color: #f4f4f4; 
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px; /* Equal padding top/bottom and left/right */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #333;
    white-space: pre-wrap; /* Preserve spaces and line breaks */
    overflow-x: auto;
    line-height: 1.2; /* Compact line spacing */
    margin: 0; /* Reset any browser or inherited margins on the <pre> */
}

blockquote {
    border-left: 4px solid #3498db;
    margin: 15px 20px;
    padding: 10px 15px;
    background-color: #f9f9f9;
    color: #555;
    font-style: italic;
}

ul {
    padding-left: 20px;
    margin: 10px 0;
}

ul li {
    margin: 5px 0;
}

h2 {
    color: #3498db;
    font-size: 1.5em;
    margin-bottom: 15px;
}