/* Custom CSS for the Bulletin Board PWA */

/* Import Google Font for a console code vibe */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

body {
    font-family: 'Source Code Pro', monospace;
    background-color: #000000; /* Pure black background */
    color: #F8F8F8; /* Near white text for high contrast */
    line-height: 1.6; /* Improved readability for body text */
}

/* Specific styling for the cards and input area */
.bg-panel-dark {
    background-color: #1A1A1A; /* Very dark grey for panels (cards, input area) */
    border: 1px solid #333333; /* Subtle border for definition */
}

.text-main-heading {
    color: #E0E0E0; /* Slightly off-white for main headings */
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.1); /* Very subtle glow */
}

.text-sub-heading {
    color: #D0D0D0; /* Lighter grey for sub-headings */
}

/* Primary buttons */
.btn-primary {
    background-color: #3A3A3A; /* Dark grey button background */
    color: #F8F8F8; /* Near white text on button */
    border: 1px solid #555555; /* Button border for definition */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    font-weight: 700; /* Bold text for buttons */
}

.btn-primary:hover {
    background-color: #4A4A4A; /* Slightly lighter grey on hover */
    border-color: #777777; /* More visible border on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

.btn-primary:active {
    background-color: #2A2A2A; /* Even darker on click */
    transform: translateY(0);
}

/* Delete buttons */
.btn-delete {
    background-color: #8B0000; /* Darker red for delete button */
    color: #FFFAFA; /* Very light text for contrast on red */
    border: 1px solid #A00000; /* Red border */
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.btn-delete:hover {
    background-color: #C00000; /* Brighter red on hover for clear feedback */
    border-color: #FF0000;
}

/* Input fields styling */
input[type="text"],
input[type="url"],
textarea,
input[type="file"] {
    background-color: #262626; /* Darker grey for inputs */
    color: #F8F8F8; /* Near white text */
    border: 1px solid #444444; /* Medium grey border */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="url"]:focus,
textarea:focus,
input[type="file"]:focus {
    outline: none;
    border-color: #888888; /* Distinct grey focus ring */
    box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.4); /* Soft glowing effect */
}

/* Placeholder text color */
::placeholder {
    color: #AAAAAA; /* Medium grey for placeholders */
    opacity: 0.8; /* Slightly transparent */
}

/* Links within cards */
.card-link {
    color: #BBBBBB; /* Lighter grey for links, still clearly visible */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.card-link:hover {
    color: #F8F8F8; /* Even lighter on hover */
}

/* Scrollbar styling for a consistent dark theme */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000000; /* Black track */
}

::-webkit-scrollbar-thumb {
    background: #333333; /* Dark grey thumb */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555; /* Lighter grey on hover */
}

/* General status messages */
.status-success {
    color: #4CAF50; /* Standard green for success */
}

.status-error {
    color: #F44336; /* Standard red for error */
}