/* app.css - Complete Metro UI Styling */

/* CSS Variables for Metro Theme Colors */
:root {
    --metro-accent-blue: #1BA1E2; /* Blue - classic Metro accent */
    --metro-accent-magenta: #FF0097; /* Magenta */
    --metro-accent-purple: #A200FF; /* Purple */
    --metro-accent-teal: #00ABA9;   /* Teal */
    --metro-accent-lime: #8CBF26;   /* Lime */
    --metro-accent-brown: #996600;  /* Brown */
    --metro-accent-orange: #F09609; /* Orange */
    --metro-accent-red: #E51400;    /* Red */
    --metro-accent-green: #339933;  /* Green */

    /* Choose a primary accent color for the theme */
    --primary-metro-accent: var(--metro-accent-blue);

    /* Background and UI element colors for Dark Theme */
    --background-dark: #1e1e1e;
    --tile-background: #2a2a2a;
    --border-color: #555;
    --text-color-primary: #e0e0e0; /* Brighter text for main content/headings */
    --text-color-secondary: #a0a0a0; /* Subtler text for labels/less important info */
    /* Helper to get RGB values from hex for rgba() usage */
    --primary-metro-accent-rgb: 27, 161, 226; /* RGB for #1BA1E2 */
}

/* --- Base Body & Typography --- */
body {
    background-color: var(--background-dark);
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    color: var(--text-color-secondary); /* Default body text is a bit subtle */
    margin: 0;
    padding: 0;
    font-size: 16px; /* Base font size, ensures 1em is 16px (well above 15 points) */
    font-weight: 300; /* Default body text to Semi-light */
    line-height: 1.4; /* Improved readability */
}

header {
    background-color: #2a2a2a; /* Darker header background */
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

h1, h2, h3, h4 {
    text-align: center;
    color: var(--text-color-primary); /* Headings are brighter */
    margin: 0.5em 0;
    font-weight: 300; /* Default headings to Semi-light */
}

h1 {
    font-size: 3.5em; /* Large and prominent */
    font-weight: 200; /* Very light weight for H1, akin to "Black" for visual prominence but delicate lines */
    letter-spacing: -0.02em; /* Tighten kerning for large titles */
    text-transform: uppercase; /* Metro style */
    color: #fff; /* White for main heading */
}
h2 {
    font-size: 1.8em; /* Larger for section/tile titles */
    font-weight: 300; /* Semi-light */
    letter-spacing: 0.05em; /* Subtle letter spacing */
    text-transform: uppercase; /* Metro style */
}
h3 { font-size: 1.2em; font-weight: 400; } /* Regular weight for sub-headings */
h4 { font-size: 1em; font-weight: 400; } /* Regular weight, at least 16px */

hr {
    border: none;
    border-top: 1px solid #282828; /* Slight border, keeping contrast */
    margin: 1.5em 0; /* More vertical space around hr */
}

/* Specific text colors for status messages */
.gr { color: var(--metro-accent-green); }
.rd { color: var(--metro-accent-red); }

/* --- Input Fields (Text & Password) --- */
input[type="text"],
input[type="password"] {
    background-color: var(--tile-background);
    color: var(--text-color-primary); /* White text for inputs */
    border: 2px solid var(--border-color); /* Thicker border */
    padding: 10px 15px; /* Increased padding for larger touch target */
    border-radius: 0px; /* Sharp corners */
    width: 250px; /* Consistent width */
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    font-size: 16px; /* Explicitly set to 16px to meet 15pt min */
    font-weight: 300; /* Semi-light for input text */
}
input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--primary-metro-accent); /* Accent border on focus */
}

/* --- Checkboxes --- */
input[type="checkbox"] {
    appearance: none;
    width: 22px; /* Larger touch target */
    height: 22px; /* Larger touch target */
    border: 2px solid var(--border-color);
    border-radius: 0px; /* Sharp corners */
    background-color: #1a1a1a; /* Darker background for unchecked */
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: background 0.2s, border 0.2s;
}

input[type="checkbox"]:checked {
    background-color: var(--primary-metro-accent); /* Metro Accent Blue when checked */
    border-color: var(--primary-metro-accent);
}

input[type="checkbox"]:checked::after {
    content: "✓";
    color: #fff; /* White checkmark */
    font-size: 16px; /* Larger checkmark */
    position: absolute;
    top: 0px; /* Adjust positioning */
    left: 2px; /* Adjust positioning */
}

/* --- Buttons --- */
input[type="button"] {
    font-size: 16px; /* Explicitly set to 16px (above 15pt) */
    border: none;
    line-height: normal; /* Reset line height for better vertical centering */
    padding: 10px 24px; /* Generous padding for touch targets */
    text-align: center;
    color: var(--text-color-primary); /* Brighter text color */
    background: rgba(var(--primary-metro-accent-rgb), 0.6); /* Accent color with opacity */
    border-radius: 0px; /* Sharp corners */
    backdrop-filter: blur(4px); /* Keep the blur for subtle depth */
    box-shadow: none; /* Flat design */
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    cursor: pointer;
    font-weight: 400; /* Regular weight for button text */
    text-transform: uppercase; /* Buttons often uppercase in Metro */
}

input[type="button"]:hover {
    background: var(--primary-metro-accent); /* Solid accent color on hover */
    color: #fff; /* White text on hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Subtle shadow on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

input[type="button"]:active {
    background: color-mix(in srgb, var(--primary-metro-accent) 90%, black); /* Darken accent on active */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); /* Inner shadow on active */
    transform: translateY(0); /* Return to original position */
}

.buttons {
    padding: 20px 0; /* More padding around button groups */
    text-align: center;
}

/* --- Metro Server Page Layout (main.html) --- */
.metro-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid for server page */
    gap: 20px; /* Space between tiles */
    padding: 20px; /* Padding around the grid */
    max-width: 900px; /* Max width for a neat layout */
    margin: 30px auto; /* Center the grid container */
}

.metro-tile {
    background-color: var(--tile-background);
    border: 2px solid var(--border-color);
    border-radius: 0px; /* Sharp corners */
    padding: 20px; /* Consistent padding */
    box-shadow: none; /* Flat design */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s;
    display: flex; /* Flexbox for content alignment */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center;
}

.metro-tile:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5); /* Clearer shadow on hover */
    border-color: var(--primary-metro-accent); /* Accent border on hover */
}

.metro-tile h2 {
    color: var(--primary-metro-accent); /* Tile headings use accent color */
    font-weight: 300; /* Semi-light */
    font-size: 1.6em; /* Consistent size */
    margin-bottom: 1em; /* Space between heading and content */
}

.metro-tile label,
.metro-tile div {
    font-size: 1em; /* Base font size, 16px */
    color: var(--text-color-secondary); /* Labels and general text */
    font-weight: 300; /* Semi-light for general text */
    margin-bottom: 5px; /* Spacing for labels */
}

/* Specific data display elements */
#latest_firmware,
#temperature_reading,
#humidity_reading,
#connected_ap,
#wifi_connect_ip,
#wifi_connect_netmask,
#wifi_connect_gw,
#file_info,
#ota_update_status,
#wifi_connect_status,
#wifi_connect_credentials_errors {
    color: var(--text-color-primary); /* Make data/status very clear */
    font-weight: 500; /* Semi-bold for important data */
    font-size: 1.1em; /* Slightly larger for data values */
    margin-top: 5px; /* Space below labels */
}
#wifi_connect_credentials_errors {
    color: var(--metro-accent-red); /* Errors in red */
    font-weight: 600; /* Bold for errors */
}


/* --- App Drawer Layout (index.html) --- */
.app-drawer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid for app drawer */
    gap: 20px; /* Space between tiles */
    max-width: 660px; /* Max width for a neat 3-column layout (200px * 3 + 2*20px gap = 640px minimum) */
    padding: 20px;
    margin: 40px auto; /* More margin to separate from header */
}

.app-tile {
    background-color: var(--tile-background);
    border: 2px solid var(--border-color);
    border-radius: 0px; /* Sharp corners */
    box-shadow: none; /* Flat design */
    font-weight: 400; /* Regular for general tile text */
    text-transform: none; /* Content within tiles not forced uppercase unless desired */
    padding: 25px; /* More padding */
    min-height: 180px; /* Ensures square aspect ratio roughly */
    display: flex; /* Flexbox for content alignment */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center;
    justify-content: space-between; /* This still helps position icon/data in middle if text moves to bottom */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s;
}

/* Specific rules for each tile's background icon */
#Time {
    background-image: url('../assets/time.svg');
    background-repeat: no-repeat;
}
#Mood {
    background-image: url('../assets/mood.svg');
    background-repeat: no-repeat;
}
#DataIn { /* Now represents CONFLUENCE / INTERLACE */
    background-image: url('../assets/datain.svg');
    background-repeat: no-repeat;
}
#DataOut { /* Now represents THE EXCHANGE / CURATED FINDS */
    background-image: url('../assets/dataout.svg'); /* You might want to replace this with an 'einkaufswagen.svg' if you create one */
    background-repeat: no-repeat;
}
#System {
    background-image: url('../assets/system-adjustments.svg');
    background-repeat: no-repeat;
}
#About {
    background-image: url('../assets/about.svg');
    background-repeat: no-repeat;
}

/* Styling for icon positioning within app tiles (common for all) */
#System, #Time, #Mood, #DataIn, #DataOut, #About {
    background-position: center 35%; /* Adjust vertical position of the icon to be higher */
    background-size: 65%; /* Slightly larger icon size */
}


.app-tile h2 {
    font-size: 1.6em; /* App tile titles a bit larger than base H2 */
    font-weight: 300; /* Semi-light */
    letter-spacing: 0.08em; /* A bit more spacing */
    text-transform: none; /* MODIFIED: No uppercase */
    color: var(--text-color-primary); /* Brighter title */
    margin-top: auto; /* MODIFIED: Pushes the title to the bottom */
    margin-bottom: 0; /* No margin below */
    padding-top: 5px; /* Small space above title */
}

.app-tile:hover {
    transform: translateY(-5px); /* More pronounced lift on hover for app tiles */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */
    border-color: var(--primary-metro-accent); /* Accent border on hover */
}


/* Ensure data value divs within app tiles are visible and styled */
.app-tile #current-time,
.app-tile #current-mood,
.app-tile #data-in,
.app-tile #data-out,
.app-tile #about-info {
    font-size: 1.8em; /* Prominent size for data values */
    color: var(--primary-metro-accent); /* Use accent color for values */
    font-weight: 500; /* Semi-bold */
    margin-top: auto; /* Pushes content to the bottom if H2 is top-aligned */
    margin-bottom: 0; /* No margin below */
    padding-top: 10px; /* Space above data if it's dynamic */
}

/* General styles for sections and labels, relevant for both pages */
section {
    padding: 10px 0;
    text-align: center;
    width: 100%; /* Ensure sections take full width within tiles */
}

label {
    display: block; /* Labels on their own line */
    font-size: 1em; /* 16px */
    color: var(--text-color-secondary);
    margin-bottom: 5px;
    font-weight: 300; /* Semi-light */
}