/* ===== GLOBAL RESET ===== */
/* WHY: * selector targets ALL elements */
/* MECHANISM: Browser default margins/padding cause inconsistent spacing */
* {
    margin: 0;
    padding: 0;
    /* WHY: border-box includes padding/border in width calculations */
    /* Q: What's the difference between border-box and content-box? */
    box-sizing: border-box;
}

/* ===== BODY BASE STYLES ===== */
/* WHY: Sets defaults inherited by all child elements */
/* USED BY: All pages - index.htm, blog.php, snake.htm, etc. */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 1.6; /* WHY: 1.6 = 160% of font size for readability */
    color: #000000; /* WHY: Pure black text */
    background-color: #ffffff; /* WHY: Pure white background */
}

/* ===== HEADER - SITE BRANDING ===== */
/* USED BY: All pages have <header> tag with site title */
/* WHY: Positioned here in CSS because header appears first in HTML */
header {
    background: #add8e6; /* WHY: Light blue - signature Sloptopia color */
    color: #000000;
    padding: 1rem 0; /* WHY: 1rem top/bottom, 0 left/right (centered by content) */
    text-align: center;
}

/* ===== NAVIGATION BAR ===== */
/* USED BY: All pages have <nav> with links to index.htm, blog.php, etc. */
/* WHY: Positioned after header - follows HTML document flow */
nav {
    background: #000000; /* WHY: Black nav contrasts with light blue header */
    padding: 0.5rem;
    text-align: center;
}

/* WHY: nav a targets <a> tags inside <nav> element */
/* MECHANISM: Descendant selector - more specific than just 'a' */
nav a {
    color: #ffffff; /* WHY: White text on black background for contrast */
    text-decoration: none; /* WHY: Removes default underline */
    padding: 0.5rem 0.75rem;
    margin: 0 0.15rem; /* WHY: Small gaps between nav links */
    display: inline-block; /* WHY: Allows padding/margin on inline elements */
    /* WHY: transition makes hover effect smooth instead of instant */
    /* Q: What does 0.3s ease mean? */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* WHY: :hover pseudo-class applies when mouse is over element */
nav a:hover {
    background: #add8e6; /* WHY: Light blue background on hover */
    color: #000000; /* WHY: Inverts colors for hover feedback */
}

/* ===== RESPONSIVE NAVIGATION ===== */
/* WHY: @media query applies styles only when conditions match */
/* MECHANISM: max-width: 768px = screens narrower than 768px (tablets/phones) */
/* Q: Why is 768px the breakpoint? */
@media (max-width: 768px) {
    nav a {
        padding: 0.4rem 0.5rem; /* WHY: Smaller padding on mobile saves space */
        margin: 0 0.1rem;
        font-size: 0.9rem; /* WHY: Slightly smaller text fits better */
    }
}

/* ===== MAIN CONTENT CONTAINER ===== */
/* USED BY: All pages wrap content in <main> tag */
/* WHY: Centers content and constrains width for readability */
main {
    max-width: 1200px; /* WHY: Prevents text lines from being too wide */
    /* WHY: 2rem top/bottom, auto left/right centers the container */
    /* MECHANISM: auto margins on left/right center block elements */
    margin: 2rem auto;
    padding: 0 1rem; /* WHY: Padding prevents content touching screen edges */
}

/* ===== HERO SECTION ===== */
/* USED BY: index.htm - profile name/tagline at top */
/* WHY: .hero class selector - dot means class */
.hero {
    background: #add8e6;
    padding: 3rem; /* WHY: Large padding creates visual emphasis */
    border-radius: 5px; /* WHY: Rounded corners soften appearance */
    text-align: center;
    margin-bottom: 2rem; /* WHY: Space below before next section */
    color: #000000;
}

/* WHY: .hero h1 is descendant selector - h1 inside .hero */
/* MECHANISM: More specific than 'h1' alone, won't affect other h1s */
.hero h1 {
    font-size: 2.5rem; /* WHY: rem units scale with root font size */
    margin-bottom: 1rem;
}

/* ===== FOOTER ===== */
/* USED BY: All pages have <footer> at bottom */
/* WHY: Positioned last in CSS - mirrors position in HTML */
footer {
    background: #000000; /* WHY: Matches nav bar color */
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem; /* WHY: Pushes footer away from main content */
}

/* ===== BUSINESS CARD LAYOUT ===== */
/* USED BY: index.htm - container for all profile sections */
/* WHY: Nested inside main, further constrains width */
.business-card {
    max-width: 900px; /* WHY: Narrower than main (1200px) for better reading */
    margin: 0 auto; /* WHY: Centers within main container */
}

/* ===== SECTION BOXES ===== */
/* USED BY: index.htm - each .section div contains achievements/skills/etc. */
/* WHY: Reusable class for consistent card styling */
/* STYLED: Multiple sections use this - achievements, skills, warnings, etc. */
.section {
    background: #ffffff;
    border: 3px solid #000000; /* WHY: Bold border creates card effect */
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem; /* WHY: Vertical spacing between sections */
    /* WHY: box-shadow creates offset shadow for depth effect */
    /* MECHANISM: 8px right, 8px down, 0px blur, light blue color */
    box-shadow: 8px 8px 0px #add8e6;
}

/* WHY: Styles all h2 headings inside .section */
.section h2 {
    margin-bottom: 1.5rem; /* WHY: Space between heading and content */
    text-transform: uppercase; /* WHY: All caps for emphasis */
    letter-spacing: 2px; /* WHY: Spreads letters for readability */
}

/* ===== STATS GRID LAYOUT ===== */
/* USED BY: index.htm - populated by JavaScript (Object.entries loop) */
/* CALLS: Referenced in index.htm line 214 */
/* WHY: CSS Grid for responsive multi-column layout */
.stats-grid {
    display: grid; /* WHY: Grid layout allows auto-responsive columns */
    /* WHY: repeat(auto-fit, ...) creates as many columns as fit */
    /* MECHANISM: minmax(200px, 1fr) = minimum 200px, max 1 fraction of space */
    /* Q: What's the difference between auto-fit and auto-fill? */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem; /* WHY: Spacing between grid items */
    margin-bottom: 2rem;
}

/* ===== INDIVIDUAL STAT CARDS ===== */
/* CREATED BY: JavaScript in index.htm line 217 */
/* WHY: Each stat (charisma, speed, etc.) becomes one card */
.stat-card {
    background: #000000; /* WHY: Inverted colors - black bg, white text */
    color: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    transform: rotate(-1deg); /* WHY: Slight tilt adds playful aesthetic */
    transition: transform 0.3s ease; /* WHY: Smooth animation on hover */
}

/* WHY: :nth-child(even) targets every 2nd, 4th, 6th card */
/* MECHANISM: Alternating tilt creates varied visual rhythm */
.stat-card:nth-child(even) {
    transform: rotate(1deg); /* WHY: Tilts opposite direction from odd cards */
}

/* WHY: :hover changes styles when mouse is over element */
.stat-card:hover {
    transform: rotate(0deg) scale(1.05); /* WHY: Straightens and enlarges on hover */
}

/* WHY: These style children of .stat-card created by JS */
/* TARGETS: innerHTML content from index.htm line 219-222 */
.stat-label {
    font-size: 0.8rem; /* WHY: Smaller text for label vs value */
    margin-bottom: 0.5rem;
    opacity: 0.8; /* WHY: Slightly faded for visual hierarchy */
}

.stat-value {
    font-size: 1.2rem; /* WHY: Larger text emphasizes the number */
    font-weight: bold;
}

/* ===== LIST STYLES INSIDE SECTIONS ===== */
/* USED BY: Achievements, certifications, fun facts lists */
/* WHY: Removes default bullets - we add custom styling instead */
.section ul {
    list-style: none; /* WHY: Removes • bullets */
    padding: 0; /* WHY: Removes default indentation */
}

/* WHY: Styles each <li> item in section lists */
/* CREATED BY: JavaScript in index.htm lines 232-267 */
.section li {
    padding: 0.75rem;
    margin-bottom: 0.5rem; /* WHY: Vertical spacing between items */
    background: #add8e6;
    /* WHY: border-left creates accent bar on left side only */
    border-left: 5px solid #000000;
    border-radius: 5px;
}

/* ===== SKILLS BADGE CONTAINER ===== */
/* USED BY: index.htm line 239 - skills section */
/* WHY: Flexbox allows badges to wrap to next line when needed */
.skills-container {
    display: flex; /* WHY: Flexbox for horizontal layout */
    flex-wrap: wrap; /* WHY: Wraps to new line instead of overflowing */
    gap: 1rem; /* WHY: Spacing between skill badges */
}

/* ===== INDIVIDUAL SKILL BADGES ===== */
/* CREATED BY: JavaScript in index.htm line 241-244 */
.skill-badge {
    background: #000000;
    color: #ffffff;
    padding: 0.75rem 1.5rem; /* WHY: More horizontal than vertical padding */
    border-radius: 25px; /* WHY: High radius creates pill shape */
    display: inline-block;
    transition: transform 0.2s ease;
}

.skill-badge:hover {
    transform: scale(1.1); /* WHY: Enlarges badge on hover */
    background: #add8e6; /* WHY: Color inversion for hover feedback */
    color: #000000;
}

/* ===== WARNING SECTION OVERRIDE ===== */
/* USED BY: index.htm - warnings section has both .section and .warnings-section */
/* WHY: More specific selector overrides base .section styles */
/* MECHANISM: Specificity - class selector beats element selector */
.warnings-section {
    background: #fffacd; /* WHY: Yellow background signals warning */
    border-color: #ff0000; /* WHY: Red border for alert */
}

/* ===== WARNING BOX ITEMS ===== */
/* CREATED BY: JavaScript in index.htm line 248-252 */
.warning-box {
    background: #ff6b6b; /* WHY: Red background for individual warnings */
    color: #000000;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 5px;
    font-weight: bold; /* WHY: Emphasizes warning text */
    border: 2px dashed #000000; /* WHY: Dashed border looks like caution tape */
}

/* ===== VOTE BUTTONS ===== */
/* USED BY: blog.php - upvote/downvote buttons for each post */
/* WHY: Positioned here after profile styles, before blog-specific styles */
.vote-btn {
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 5px;
    padding: 0.75rem 2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 1.5rem; /* WHY: Large emoji buttons */
    cursor: pointer; /* WHY: Shows hand pointer on hover */
    transition: all 0.2s ease; /* WHY: Animates all property changes */
    display: inline-flex; /* WHY: Flex centers emoji inside button */
    align-items: center; /* WHY: Vertical centering */
    gap: 0.75rem; /* WHY: Space between emoji and vote count */
    min-width: 120px; /* WHY: Prevents buttons from being too narrow */
    justify-content: center; /* WHY: Horizontal centering */
}

/* WHY: :hover:not(:disabled) = hover only when button is enabled */
/* MECHANISM: Multiple pseudo-classes combine with AND logic */
.vote-btn:hover:not(:disabled) {
    transform: scale(1.1); /* WHY: Enlarges button for feedback */
    box-shadow: 5px 5px 0px #add8e6; /* WHY: Shadow appears on hover */
}

/* WHY: .vote-up class added to upvote button in blog.php */
.vote-up:hover:not(:disabled) {
    background: #90ee90; /* WHY: Green = positive/upvote */
}

/* WHY: .vote-down class added to downvote button */
.vote-down:hover:not(:disabled) {
    background: #ffcccb; /* WHY: Red = negative/downvote */
}

/* WHY: :disabled applies when button has disabled attribute */
/* USED BY: blog.php after user votes (prevents double voting) */
.vote-btn:disabled {
    opacity: 0.5; /* WHY: Faded appearance shows inactive state */
    cursor: not-allowed; /* WHY: Shows 🚫 cursor on hover */
}

/* WHY: :active applies when button is being clicked */
.vote-btn:active:not(:disabled) {
    transform: scale(0.95); /* WHY: Shrinks button = pressed effect */
    box-shadow: 2px 2px 0px #add8e6; /* WHY: Smaller shadow = pressed in */
}

/* ===== RESPONSIVE OVERRIDES ===== */
/* WHY: Adjusts layout for mobile devices */
/* MECHANISM: Styles inside @media only apply when screen ≤ 768px */
@media (max-width: 768px) {
    /* WHY: Single column on mobile instead of auto-fit grid */
    .stats-grid {
        grid-template-columns: 1fr; /* WHY: 1fr = one column, full width */
    }

    /* WHY: Smaller heading on mobile */
    .hero h1 {
        font-size: 2rem; /* WHY: Reduced from 2.5rem */
    }

    /* WHY: Less padding on mobile saves screen space */
    .section {
        padding: 1rem; /* WHY: Reduced from 2rem */
    }

    /* WHY: Smaller vote buttons fit better on mobile */
    .vote-btn {
        padding: 0.6rem 1.5rem;
        font-size: 1.3rem;
        min-width: 100px;
    }

    /* WHY: Allows vote buttons to stack vertically if needed */
    .post-votes {
        flex-wrap: wrap;
    }
}

/* ===== BLOG PAGE STYLES ===== */
/* USED BY: blog.php - main blog display page */
/* WHY: Positioned after general styles, contains blog-specific classes */
.blog-container {
    max-width: 900px; /* WHY: Matches .business-card width */
    margin: 0 auto; /* WHY: Centers container */
}

/* WHY: Each blog post gets .blog-post class wrapper */
/* CREATED BY: blog.php PHP loop that generates posts from JSON */
.blog-post {
    margin-bottom: 2rem; /* WHY: Spacing between posts */
}

/* WHY: Header section of each post (title + metadata) */
.post-header {
    border-bottom: 3px solid #000000; /* WHY: Separator line */
    padding-bottom: 1rem;
    margin-bottom: 1.5rem; /* WHY: Space before post content */
}

.post-title {
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

/* WHY: Metadata (date, author) displayed in flex row */
.post-meta {
    display: flex; /* WHY: Horizontal layout for metadata items */
    gap: 1rem; /* WHY: Spacing between date/author */
    font-size: 0.9rem; /* WHY: Smaller than main text */
    color: #000000;
}

/* WHY: Date badge styling */
.post-date {
    background: #add8e6; /* WHY: Light blue pill badge */
    padding: 0.25rem 0.75rem;
    border-radius: 15px; /* WHY: Pill shape */
    display: inline-block;
}

/* WHY: Main text content of blog post */
.post-content {
    font-size: 1.1rem; /* WHY: Slightly larger for readability */
    line-height: 1.8; /* WHY: 180% line height for long-form reading */
}

/* WHY: Images embedded in blog posts */
/* USED BY: blog.php when post has image field populated */
.post-image {
    max-width: 100%; /* WHY: Prevents overflow on small screens */
    height: auto; /* WHY: Maintains aspect ratio */
    border: 3px solid #000000;
    border-radius: 5px;
    margin: 1rem 0; /* WHY: Vertical spacing above/below image */
    display: block; /* WHY: Block eliminates inline spacing issues */
    box-shadow: 5px 5px 0px #add8e6; /* WHY: Signature offset shadow */
}

/* ===== BLOG EDITOR FORM STYLES ===== */
/* USED BY: blog-editor.php - admin interface for creating/editing posts */
/* WHY: Positioned after blog display styles */
.form-group {
    margin-bottom: 1.5rem; /* WHY: Spacing between form fields */
}

/* WHY: Labels for form inputs */
.form-group label {
    display: block; /* WHY: Forces label above input (not inline) */
    margin-bottom: 0.5rem; /* WHY: Space between label and input */
    font-weight: bold;
    text-transform: uppercase; /* WHY: Consistent with .section h2 styling */
    letter-spacing: 1px;
}

/* WHY: Multiple selectors for all input types */
/* MECHANISM: Comma-separated selectors apply same styles to all */
/* Q: Why select.form-input specifically? */
.form-input,
.form-textarea,
select.form-input {
    width: 100%; /* WHY: Full-width inputs easier to use */
    padding: 0.75rem;
    border: 3px solid #000000; /* WHY: Matches site border style */
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif; /* WHY: Matches body font */
    font-style: normal;
    font-size: 1rem;
    background: #ffffff;
}

/* WHY: :focus applies when input is clicked/tabbed to */
/* MECHANISM: All three input types get same focus style */
.form-input:focus,
.form-textarea:focus,
select.form-input:focus {
    outline: none; /* WHY: Removes browser default blue outline */
    box-shadow: 0 0 0 3px #add8e6; /* WHY: Custom focus ring in brand color */
}

/* WHY: Additional styles only for textarea */
.form-textarea {
    resize: vertical; /* WHY: Allows vertical resize only, not horizontal */
    min-height: 200px; /* WHY: Large enough for blog content */
}

/* ===== BUTTON BASE STYLES ===== */
/* USED BY: blog-editor.php form submission buttons */
/* WHY: Base .btn class provides shared styles */
.btn {
    padding: 0.75rem 2rem;
    border: 3px solid #000000;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease; /* WHY: Animates all property changes */
    text-transform: uppercase; /* WHY: Matches label styling */
}

/* ===== PRIMARY BUTTON VARIANT ===== */
/* USED BY: Main action buttons (submit, save) */
/* MECHANISM: Element has both .btn and .btn-primary classes */
.btn-primary {
    background: #000000; /* WHY: Black = primary action */
    color: #ffffff;
}

.btn-primary:hover {
    background: #add8e6; /* WHY: Color swap on hover */
    color: #000000;
}

/* ===== SECONDARY BUTTON VARIANT ===== */
/* USED BY: Less important actions (cancel, back) */
.btn-secondary {
    background: #add8e6; /* WHY: Inverted from primary */
    color: #000000;
}

.btn-secondary:hover {
    background: #000000; /* WHY: Swaps to primary colors on hover */
    color: #ffffff;
}

/* ===== SMALL BUTTON SIZE ===== */
/* USED BY: Inline actions (edit/delete in post list) */
/* WHY: Separate class for smaller buttons */
.btn-small {
    padding: 0.4rem 0.8rem; /* WHY: Less padding than .btn */
    border: 2px solid #000000; /* WHY: Thinner border */
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 0.85rem; /* WHY: Smaller text */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ===== EDIT BUTTON VARIANT ===== */
/* USED BY: Edit actions in blog-editor.php post list */
/* MECHANISM: Combined with .btn-small class */
.btn-edit {
    background: #add8e6;
    color: #000000;
}

.btn-edit:hover {
    background: #000000;
    color: #ffffff;
}

/* ===== DELETE BUTTON VARIANT ===== */
/* USED BY: Delete actions in blog-editor.php */
/* WHY: Red color signals destructive action */
.btn-delete {
    background: #ff6b6b; /* WHY: Light red for warning */
    color: #000000;
}

.btn-delete:hover {
    background: #ff0000; /* WHY: Darker red on hover confirms intent */
    color: #ffffff;
}

/* ===== ERROR MESSAGES ===== */
/* USED BY: blog-editor.php when validation fails */
.error-message {
    margin-top: 1rem;
    padding: 1rem;
    background: #ff6b6b; /* WHY: Red background signals error */
    border: 2px solid #000000;
    border-radius: 5px;
    font-weight: bold; /* WHY: Emphasizes error text */
}

/* ===== POSTS LIST IN EDITOR ===== */
/* USED BY: blog-editor.php - shows all existing posts */
/* WHY: Separate from .blog-post (used on public blog.php) */
.post-list-item {
    padding: 1rem;
    margin-bottom: 1rem;
    background: #add8e6;
    border-left: 5px solid #000000; /* WHY: Same accent as .section li */
    border-radius: 5px;
}

/* WHY: Top row of each post item (title + action buttons) */
.post-list-header {
    display: flex; /* WHY: Horizontal layout */
    justify-content: space-between; /* WHY: Title left, buttons right */
    align-items: center; /* WHY: Vertical centering */
    margin-bottom: 0.5rem;
}

/* WHY: Container for edit/delete buttons */
.post-list-actions {
    display: flex;
    gap: 0.5rem; /* WHY: Spacing between buttons */
}

/* WHY: Date shown below title in post list */
.post-list-date {
    font-size: 0.85rem;
    opacity: 0.8; /* WHY: Faded for secondary info */
}

/* ===== EDIT MODE INDICATOR ===== */
/* USED BY: blog-editor.php - shown when editing existing post */
/* TARGETS: Element with id="edit-indicator" */
#edit-indicator {
    background: #fffacd; /* WHY: Yellow = caution/attention */
    padding: 0.5rem 1rem;
    border: 2px solid #000000;
    border-radius: 5px;
    animation: pulse 2s infinite; /* WHY: Calls @keyframes animation below */
}

/* WHY: CSS animation makes indicator fade in/out */
/* MECHANISM: 0% = start, 50% = middle, 100% = end of 2s cycle */
/* Q: What does infinite mean? */
@keyframes pulse {
    0%, 100% { opacity: 1; } /* WHY: Fully visible at start and end */
    50% { opacity: 0.7; } /* WHY: Faded at midpoint */
}

/* ===== INLINE CODE STYLING ===== */
/* USED BY: Blog posts that contain <code> tags */
/* WHY: Distinguishes code from regular text */
code {
    background: #add8e6; /* WHY: Light blue background highlights code */
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace; /* WHY: Monospace font for code */
}

/* ===== PASSWORD TOGGLE BUTTON ===== */
/* USED BY: blog-editor.php login form - show/hide password */
/* WHY: Positioned absolute inside password field container */
.password-toggle {
    position: absolute; /* WHY: Removes from document flow */
    right: 0.75rem; /* WHY: Positioned inside right edge of input */
    top: 50%; /* WHY: Halfway down parent element */
    /* WHY: translateY(-50%) centers vertically */
    /* MECHANISM: Moving up by half own height = perfect center */
    transform: translateY(-50%);
    background: transparent; /* WHY: No background, just emoji */
    border: none;
    font-size: 1.5rem; /* WHY: Large emoji button */
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1; /* WHY: Prevents extra vertical space */
    transition: transform 0.2s ease;
}

/* WHY: Maintains vertical centering while scaling up */
.password-toggle:hover {
    transform: translateY(-50%) scale(1.2); /* WHY: Both transforms combine */
}

/* WHY: :focus for keyboard navigation accessibility */
.password-toggle:focus {
    outline: 2px solid #add8e6; /* WHY: Visible focus indicator */
    border-radius: 3px;
}

/* ===== LOGIN HISTORY TABLE ===== */
/* USED BY: blog-editor.php - shows recent login attempts */
/* WHY: Table displays timestamp, IP, user agent, status */
.login-table {
    width: 100%; /* WHY: Full width of container */
    /* WHY: border-collapse merges cell borders into single lines */
    /* Q: What's the difference between collapse and separate? */
    border-collapse: collapse;
    margin-top: 1rem;
}

/* WHY: Styles table header row */
.login-table thead {
    background: #000000; /* WHY: Dark header stands out */
    color: #ffffff;
}

/* WHY: Styles both header cells and data cells */
/* MECHANISM: Comma-separated selectors */
.login-table th,
.login-table td {
    padding: 0.75rem;
    text-align: left; /* WHY: Left-aligned easier to read than centered */
    border: 2px solid #000000;
}

/* ===== ZEBRA STRIPING ===== */
/* WHY: Alternating row colors improve readability */
/* MECHANISM: :nth-child(odd) = 1st, 3rd, 5th rows */
.login-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

/* WHY: :nth-child(even) = 2nd, 4th, 6th rows */
.login-table tbody tr:nth-child(even) {
    background: #add8e6;
}

/* WHY: Hover highlight helps track row across columns */
.login-table tbody tr:hover {
    background: #fffacd; /* WHY: Yellow highlight */
}

/* ===== STATUS BADGES ===== */
/* USED BY: Status column in login table */
/* WHY: Green badge for successful login */
.status-success {
    background: #90ee90; /* WHY: Light green */
    color: #000000;
    padding: 0.25rem 0.75rem;
    border-radius: 15px; /* WHY: Pill shape */
    font-weight: bold;
    display: inline-block;
}

/* WHY: Red badge for failed login attempt */
.status-failed {
    background: #ff6b6b;
    color: #000000;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-weight: bold;
    display: inline-block;
}

/* ===== PROFILE PICTURE MANAGER ===== */
/* USED BY: blog-editor.php - grid of uploaded profile pictures */
/* WHY: Each picture history item gets this class */
.profile-pic-item {
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 10px;
    padding: 1rem;
    transition: transform 0.2s ease;
}

/* WHY: Hover effect provides visual feedback */
.profile-pic-item:hover {
    transform: scale(1.05); /* WHY: Slightly enlarges on hover */
    box-shadow: 5px 5px 0px #add8e6; /* WHY: Shadow appears on hover */
}