/*
    Final Integrated CSS
    - Dark Mode
    - Smaller, non-linear card layout (max-width: 600px, minmax(160px, 1fr))
    - Increased color presence via --app-color for borders/text
    - 1px border, 6px radius
    - Logo integration (.app-logo)
*/

:root {
    --color-bg-primary: #0f0f13; /* Very dark blue-black */
    --color-bg-secondary: #1a1a21; /* Slightly lighter for elements */
    --color-text-light: #e0e0e0;
    --color-text-muted: #999999;
    --border-width: 1px;
    --border-radius-size: 6px;
    --color-accent-border: 0.7; /* Controls initial opacity of the accent border color */
}

/* --- Global & Typography --- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--color-bg-primary);
    color: var(--color-text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    
    /* Subtle background gradient to avoid "solid fill" look */
    background-image: radial-gradient(circle at top left, rgba(26, 26, 33, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at bottom right, rgba(26, 26, 33, 0.1) 0%, transparent 50%);
}

h1 {
    font-size: 2.2em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    color: var(--color-text-light);
}

/* --- Main Content Layout --- */

.link-grid {
    display: grid;
    gap: 15px; /* Reduced gap for tighter layout */
    width: 100%;
    max-width: 600px; /* Reduced max width to enforce a smaller feel */
    margin: 0 auto;
    padding: 0 10px;
    flex-grow: 1;
    
    /* Responsive Grid: Cards are smaller and stack more quickly */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    justify-content: center; 
    align-content: flex-start;
}

/* --- Application Links (Card Styling) --- */

.app-link {
    display: flex;
    flex-direction: column; /* Stack logo and text vertically */
    justify-content: center;
    align-items: center;
    padding: 15px 10px; /* Reduced padding for smaller cards */
    min-height: 80px;
    text-align: center;
    
    /* Typography */
    text-decoration: none;
    font-size: 1.0em; 
    font-weight: 500;
    
    /* Increased color presence: text color mixed with app accent color */
    color: color-mix(in srgb, var(--app-color, white) 70%, var(--color-text-light));
    
    background-color: var(--color-bg-secondary);
    
    /* 1px border & 6px radius, using a dimmed app color */
    border: var(--border-width) solid color-mix(in srgb, var(--app-color) var(--color-accent-border), transparent); 
    border-radius: var(--border-radius-size);
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    
    transition: all 0.2s ease-out;
}

.app-link:hover {
    transform: translateY(-2px); 
    
    /* Stronger color presence on hover */
    box-shadow: 
        0 6px 15px rgba(0, 0, 0, 0.4), 
        0 0 0 var(--border-width) var(--app-color), /* Full accent color border */
        0 0 10px -3px var(--app-color); /* Subtle glow */

    background-color: color-mix(in srgb, var(--app-color) 5%, var(--color-bg-secondary)); /* Slight background shift */
    color: var(--color-text-light); /* Ensure high contrast text on hover */
}

.app-link:active {
    transform: translateY(0);
    opacity: 0.95;
}

/* --- Logo Styling --- */

.app-logo {
    width: 32px; 
    height: 32px;
    margin-bottom: 8px; /* Space between logo and text */
    
    /* Placeholder appearance/Base for image */
    border-radius: 4px; 
}

/* Specific Logo Overrides: Use these blocks to apply actual images/icons */

.app-logo.kanidm {
    /* Placeholder uses the accent color for visualization */
    background-color: var(--app-color);
}

.app-logo.audiobookshelf {
    background-color: var(--app-color);
}

.app-logo.kavita {
    background-color: var(--app-color);
}

/* --- Footer --- */

footer {
    width: 100%;
    max-width: 600px;
    margin: 30px auto 0;
    padding: 15px 10px 0;
    text-align: center;
    font-size: 0.85em;
    color: var(--color-text-muted);
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.05); /* Separator line */
}

/* --- Media Queries --- */
@media (max-width: 400px) {
    .link-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
}