/*
    File: style.css
    GUI Assignment: HW4 Part 1 - jQuery Validation Plugin
    Platon Supranovich, UMass Lowell Computer Science, Platon_Supranovich@student.uml.edu
    Copyright (c) 2025 by Platon. All rights reserved. May be freely copied or
    excerpted for educational purposes with credit to the author.
    updated by PS on November 15, 2025 at 8:00 AM
*/

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ----------PAGE TITLE---------- */
h1 {
    margin-bottom: 20px;
    color: #2c3e50;
}

/* ----------FORM GRID LAYOUT---------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 900px;
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #2c3e50;
}

.input-group input[type="number"] {
    padding: 10px 12px;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 6px;
    transition: border-color 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #0069d9;
}

/* Submit button */
#tableForm button {
    padding: 10px 24px;
    font-weight: bold;
    background: #0069d9;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
    align-self: center;
    margin-top: 10px;
}

#tableForm button:hover {
    background: #0053b3;
}

/* ----------ERROR STYLING---------- */
.error-message {
    color: #d32f2f;
    font-size: 0.85rem;
    margin-top: 6px;
    min-height: 1.2em;
    font-weight: 500;
}

.input-group input.error-input {
    border-color: #d32f2f;
    background-color: #fff5f5;
}

.error-placeholder {
    min-height: 24px; /* Prevents layout jump */
}

/* ----------TABLE CONTAINER---------- */
.table-container {
    margin-top: 30px;
    max-width: 100%;
    overflow: auto;
    max-height: 70vh;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* ----------TABLE STYLING---------- */
#resultTable {
    border-collapse: collapse;
    min-width: 100%;
    background: #fff;
}

#resultTable th,
#resultTable td {
    border: 1px solid #999;
    padding: 10px 12px;
    text-align: center;
    min-width: 50px;
}

#resultTable thead th {
    background: #2c3e50;
    color: #fff;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 3;
}

#resultTable tbody th {
    background: #34495e;
    color: #fff;
    font-weight: bold;
    position: sticky;
    left: 0;
    z-index: 2;
}

#resultTable thead th:first-child,
#resultTable tbody th:first-child {
    background: #1a252f;
    z-index: 4;
}

#resultTable tbody tr:nth-child(even) {
    background: #f8f9fa;
}

#resultTable tbody td:hover {
    background: #e3f2fd;
}