/* ============================================================
   LifeAside – style.css (Dark)
   ============================================================ */


/* ============================================================
   1) Root / Global defaults
   ============================================================ */

:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Default UI font */
    color-scheme: dark; /* Hint browser UI to use dark widgets */
}

body {
    margin: 0; /* Remove default margin */
    min-height: 100vh; /* Full viewport height */
    display: flex; /* Center layout by default (used by some pages) */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    background: radial-gradient(circle at top, #1d2340, #020617 55%, #000 100%); /* Ambient background */
    color: #e5e7eb; /* Base text color */
}


/* ============================================================
   2) Generic container / cards (status page, etc.)
   ============================================================ */

.container {
    background: rgba(15,23,42,0.95); /* Panel background */
    padding: 2rem 2.5rem; /* Inner spacing */
    border-radius: 1.25rem; /* Rounded corners */
    box-shadow: 0 25px 60px rgba(0,0,0,0.75); /* Strong shadow */
    max-width: 800px; /* Max width */
    width: 100%; /* Responsive */
}

h1 {
    margin: 0 0 0.25rem 0; /* Title spacing */
    font-size: 1.8rem; /* Title size */
}

.subtitle {
    margin: 0 0 1.5rem 0; /* Spacing below */
    font-size: 0.95rem; /* Subtitle size */
    color: #9ca3af; /* Muted text */
}

.status-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive columns */
    gap: 1rem; /* Grid gap */
    margin-top: 0.75rem; /* Spacing above */
}

.card {
    background: #020617; /* Card background */
    border-radius: 0.9rem; /* Rounded corners */
    padding: 0.9rem 1rem; /* Inner spacing */
    border: 1px solid rgba(148,163,184,0.25); /* Subtle border */
    position: relative; /* For pseudo-element */
    overflow: hidden; /* Hide glow overflow */
}

.card::before {
    content: ""; /* Needed for pseudo-element */
    position: absolute; /* Full overlay */
    inset: -40%; /* Oversize for soft edges */
    background: radial-gradient(circle at top, rgba(56,189,248,0.08), transparent 55%); /* Soft glow */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-out; /* Smooth hover */
}

.card:hover::before {
    opacity: 1; /* Show glow on hover */
}

.card-title {
    font-size: 1rem; /* Title size */
    margin-bottom: 0.4rem; /* Spacing below */
}

.badge {
    display: inline-flex; /* Inline flex */
    align-items: center; /* Vertical center */
    gap: 0.35rem; /* Space between dot/text */
    padding: 0.15rem 0.6rem; /* Badge padding */
    border-radius: 999px; /* Pill shape */
    font-size: 0.75rem; /* Badge size */
    font-weight: 500; /* Slightly bold */
}

.badge-ok {
    background: rgba(22,163,74,0.12); /* Green background */
    color: #4ade80; /* Green text */
    border: 1px solid rgba(34,197,94,0.35); /* Green border */
}

.badge-fail {
    background: rgba(185,28,28,0.18); /* Red background */
    color: #fca5a5; /* Red text */
    border: 1px solid rgba(248,113,113,0.4); /* Red border */
}

.badge-unknown {
    background: rgba(148,163,184,0.15); /* Neutral background */
    color: #e5e7eb; /* Neutral text */
    border: 1px solid rgba(148,163,184,0.4); /* Neutral border */
}

.detail {
    margin-top: 0.4rem; /* Spacing above */
    font-size: 0.78rem; /* Small text */
    color: #9ca3af; /* Muted text */
    word-break: break-word; /* Prevent overflow */
}

.overall {
    margin-top: 1.25rem; /* Spacing above */
    padding-top: 0.9rem; /* Spacing inside */
    border-top: 1px solid rgba(55,65,81,0.7); /* Separator line */
    display: flex; /* Layout */
    justify-content: space-between; /* Spread items */
    align-items: center; /* Vertical center */
    gap: 0.75rem; /* Spacing */
    font-size: 0.9rem; /* Text size */
    color: #9ca3af; /* Muted text */
}

.overall span strong {
    color: #e5e7eb; /* Highlight */
}

.pill {
    padding: 0.3rem 0.75rem; /* Padding */
    border-radius: 999px; /* Pill */
    font-size: 0.8rem; /* Text size */
    border: 1px solid rgba(148,163,184,0.35); /* Border */
    color: #e5e7eb; /* Text color */
}

.pill-ok {
    border-color: rgba(34,197,94,0.4); /* Green border */
    color: #4ade80; /* Green text */
}

.pill-fail {
    border-color: rgba(248,113,113,0.5); /* Red border */
    color: #fca5a5; /* Red text */
}

.refresh-btn {
    appearance: none; /* Remove default styles */
    border: none; /* No border */
    padding: 0.35rem 0.9rem; /* Padding */
    border-radius: 999px; /* Pill */
    font-size: 0.8rem; /* Text size */
    cursor: pointer; /* Pointer */
    background: linear-gradient(135deg, #38bdf8, #8b5cf6); /* Gradient */
    color: #0b1120; /* Dark text */
    font-weight: 600; /* Bold */
    display: inline-flex; /* Inline flex */
    align-items: center; /* Vertical center */
    gap: 0.35rem; /* Space */
}

.refresh-btn:disabled {
    opacity: 0.5; /* Disabled state */
    cursor: default; /* Disabled cursor */
}

.small-dot {
    width: 0.35rem; /* Dot size */
    height: 0.35rem; /* Dot size */
    border-radius: 999px; /* Round */
    background: currentColor; /* Inherit color */
}

.error-text {
    margin-top: 0.6rem; /* Spacing above */
    font-size: 0.78rem; /* Small */
    color: #fda4af; /* Soft red */
}

@media (max-width: 640px) {
    .container {
        border-radius: 0; /* Edge-to-edge */
        min-height: 100vh; /* Full height */
        box-shadow: none; /* No shadow */
    }
}


/* ============================================================
   3) Top login bar (KEEP ORIGINAL LOOK)
   ============================================================ */

.top-bar {
    position: fixed; /* Fixed header */
    top: 0; /* Pin to top */
    left: 0; /* Full width */
    right: 0; /* Full width */
    height: 3rem; /* Bar height */
    padding: 0 1.5rem; /* Horizontal padding */
    display: flex; /* Flex layout */
    align-items: center; /* Vertical center */
    justify-content: space-between; /* Logo left / form right */
    background: linear-gradient(to right, rgba(15,23,42,0.95), rgba(15,23,42,0.75)); /* Original gradient */
    border-bottom: 1px solid rgba(148,163,184,0.3); /* Original border */
    z-index: 50; /* Above content */
}

.top-bar-title {
    display: flex; /* Flex */
    align-items: center; /* Vertical center */
    height: 100%; /* Full bar height */
    font-size: 0.95rem; /* Original size */
    font-weight: 600; /* Original weight */
    color: #e5e7eb; /* Original color */
}

.top-bar-logo {
    height: 70%; /* Original sizing */
    width: auto; /* Keep ratio */
    display: block; /* No inline gaps */
    object-fit: contain; /* Keep inside */
}

.top-bar-login {
    display: flex; /* Inline form */
    align-items: center; /* Vertical align */
    gap: 0.5rem; /* Original spacing */
}


/* ============================================================
   4) Login form inputs / buttons (KEEP ORIGINAL LOOK)
   ============================================================ */

.input-field {
    background: rgba(15,23,42,0.9); /* Original background */
    border-radius: 999px; /* Pill */
    border: 1px solid rgba(148,163,184,0.4); /* Original border */
    padding: 0.35rem 0.75rem; /* Original padding */
    font-size: 0.8rem; /* Original size */
    color: #e5e7eb; /* Text color */
    outline: none; /* No outline */
    min-width: 220px; /* Wider username/password (your tweak) */
}

.input-field::placeholder {
    color: #6b7280; /* Placeholder color */
}

.input-field:focus {
    border-color: rgba(56,189,248,0.8); /* Focus border */
}

.btn-login {
    appearance: none; /* Reset */
    border: none; /* No border */
    padding: 0.35rem 0.9rem; /* Padding */
    border-radius: 999px; /* Pill */
    font-size: 0.8rem; /* Size */
    cursor: pointer; /* Pointer */
    background: linear-gradient(135deg, #38bdf8, #8b5cf6); /* Gradient */
    color: #0b1120; /* Dark text */
    font-weight: 600; /* Bold */
    display: inline-flex; /* Inline flex */
    align-items: center; /* Center */
    gap: 0.35rem; /* Gap */
    white-space: nowrap; /* No wrap */
}

.btn-login:disabled {
    opacity: 0.5; /* Disabled */
    cursor: default; /* Default cursor */
}

.select-field {
    background: rgba(15,23,42,0.9); /* Original background */
    border-radius: 999px; /* Pill */
    border: 1px solid rgba(148,163,184,0.4); /* Original border */
    padding: 0.35rem 0.75rem; /* Original padding */
    font-size: 0.8rem; /* Original size */
    color: #e5e7eb; /* Text color */
    outline: none; /* No outline */
    cursor: pointer; /* Pointer */
}

.select-field:focus {
    border-color: rgba(56,189,248,0.8); /* Focus border */
}

.btn-register {
    appearance: none; /* Reset */
    border: none; /* No border */
    padding: 0.35rem 0.9rem; /* Padding */
    border-radius: 999px; /* Pill */
    font-size: 0.8rem; /* Size */
    cursor: pointer; /* Pointer */
    background: linear-gradient(135deg, #8b5cf6, #c084fc); /* Purple gradient */
    color: #0b1120; /* Dark text */
    font-weight: 600; /* Bold */
    display: inline-flex; /* Inline flex */
    align-items: center; /* Center */
    gap: 0.35rem; /* Gap */
    white-space: nowrap; /* No wrap */
}

.btn-register:hover {
    opacity: 0.9; /* Hover */
}


/* ============================================================
   5) Page offset when top bar is present
   ============================================================ */

body.with-top-bar {
    padding-top: 3.5rem; /* Ensure content starts below top-bar */
}

/* ============================================================
   6) Center logo helpers (legacy / optional)
   ============================================================ */

.center-logo-wrapper {
    display: flex; /* Flex center */
    justify-content: center; /* Horizontal */
    align-items: center; /* Vertical */
    min-height: calc(100vh - 4rem); /* Leave room for top bar */
}

.center-logo {
    max-width: 300px; /* Limit */
    width: 60%; /* Responsive */
    opacity: 0.95; /* Soft */
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6)); /* Glow */
    transition: transform 0.25s ease, opacity 0.25s ease; /* Smooth */
}

.center-logo:hover {
    transform: scale(1.05); /* Zoom */
    opacity: 1; /* Full */
}


/* ============================================================
   7) Feed area (Top announcements)
   Changes requested:
   - Frame is wider: 75% width
   - Image fixed width, vertically centered in the card
   - Title blue a bit larger
   ============================================================ */

.feed-wrapper {
    width: 75%; /* Requested: 75% of viewport width */
    max-width: none; /* Remove fixed cap */
    margin: 0 auto 1.5rem auto; /* Center + bottom spacing */
    padding: 0 1.5rem; /* Side padding */
}

.feed-list {
    display: flex; /* Vertical list */
    flex-direction: column; /* Stack items */
    gap: 1rem; /* Spacing between items */
}

.feed-item {
    display: flex; /* Image + content */
    gap: 1rem; /* Space between columns */
    background: rgba(15,23,42,0.95); /* Same panel style */
    border: 1px solid rgba(148,163,184,0.25); /* Subtle border */
    border-radius: 1.25rem; /* Rounded card */
    padding: 1rem; /* Inner padding */
    box-shadow: 0 20px 45px rgba(0,0,0,0.6); /* Shadow */
    align-items: center; /* Vertical centering for image + text */
}

.feed-image {
    width: 320px; /* Fixed image width (requested style) */
    min-width: 320px; /* Prevent shrinking */
    height: 180px; /* Stable image height inside the card */
    border-radius: 0.9rem; /* Rounded corners */
    object-fit: cover; /* Crop nicely */
    background: #020617; /* Fallback background */
}

.feed-content {
    display: flex; /* Vertical layout */
    flex-direction: column; /* Title then body */
    justify-content: center; /* Vertical center */
    min-width: 0; /* Allow wrapping */
}

.feed-date {
    font-size: 1.05rem; /* Bigger blue title (requested) */
    font-weight: 650; /* Slightly stronger */
    color: #38bdf8; /* Same blue */
    margin-bottom: 0.35rem; /* Space below title */
}

.feed-text {
    font-size: 0.95rem; /* Slightly larger body */
    color: #e5e7eb; /* Body color */
    line-height: 1.45; /* Readable spacing */
    white-space: pre-wrap; /* Preserve line breaks from .txt */
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .feed-wrapper {
        width: 100%; /* Full width on small screens */
        padding: 0 1rem; /* Slightly smaller padding */
    }

    .feed-item {
        flex-direction: column; /* Stack image then text */
        align-items: center; /* Center */
        text-align: center; /* Center text */
    }

    .feed-image {
        width: 100%; /* Full width */
        min-width: 0; /* Allow shrink */
        height: 200px; /* Mobile height */
    }
}