/* General Styles */
:root {
    --primary-color: #4285F4; /* Google Blue */
    --primary-color-dark: #357ae8;
    --secondary-color: #f4f8ff; /* Light blue background */
    --text-color: #333;
    --border-color: #dfe1e5;
    --header-bg: linear-gradient(to right, #4285F4, #629BF8);
    --footer-bg: #f2f2f2;
    --button-hover-bg: #357ae8;
    --table-header-bg: #e8f0fe;
    --table-hover-bg: #f4f8ff;
    --flash-success-bg: #dff0d8;
    --flash-success-border: #d6e9c6;
    --flash-success-text: #3c763d;
    --flash-danger-bg: #f2dede;
    --flash-danger-border: #ebccd1;
    --flash-danger-text: #a94442;
    --flash-info-bg: #d9edf7;
    --flash-info-border: #bce8f1;
    --flash-info-text: #31708f;
    --flash-warning-bg: #fcf8e3;
    --flash-warning-border: #faebcc;
    --flash-warning-text: #8a6d3b;
    --transition-speed: 0.3s;
}

body {
    font-family: 'Roboto', sans-serif; /* Modern Google Font */
    line-height: 1.6;
    margin: 0;
    background-color: #fff;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding: 20px 40px; /* More padding */
}

/* Header */
header {
    background: var(--header-bg);
    color: white;
    padding: 15px 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 500;
}

nav {
    background-color: transparent; /* Remove old background */
    padding: 10px 0 0 0; /* Adjust padding */
    margin-bottom: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    /* display: inline; */ /* REMOVED - Likely conflicts with Bootstrap 5 flexbox */
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: white; /* Header links are white */
    font-weight: 500;
    transition: opacity var(--transition-speed) ease;
}

nav a:hover {
    opacity: 0.8;
    color: white;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 8px; /* Rounded corners for the table */
    overflow: hidden; /* Needed for border-radius */
}

th, td {
    border: none; /* Remove individual cell borders */
    border-bottom: 1px solid var(--border-color); /* Horizontal lines only */
    padding: 12px 15px; /* More padding */
    text-align: left;
    vertical-align: middle;
}

th {
    background-color: var(--table-header-bg);
    font-weight: 600;
    color: var(--primary-color-dark);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

tr:last-child td {
    border-bottom: none; /* No border for the last row */
}

tr:hover {
    background-color: var(--table-hover-bg); /* Hover effect */
}

/* Flash Messages */
.flash-message {
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 500;
}

.flash-message.info { color: var(--flash-info-text); background-color: var(--flash-info-bg); border-color: var(--flash-info-border); }
.flash-message.success { color: var(--flash-success-text); background-color: var(--flash-success-bg); border-color: var(--flash-success-border); }
.flash-message.warning { color: var(--flash-warning-text); background-color: var(--flash-warning-bg); border-color: var(--flash-warning-border); }
.flash-message.danger { color: var(--flash-danger-text); background-color: var(--flash-danger-bg); border-color: var(--flash-danger-border); }

input[type="submit"]:hover,
button:not(.btn):hover { /* Apply hover only to non-Bootstrap buttons if needed */
    background-color: var(--button-hover-bg); /* Keep for potential non-Bootstrap buttons */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}


/* Ensure buttons in action groups don't wrap unexpectedly */
.action-buttons .btn-group {
    white-space: nowrap;
    /* Ensure all items in the group align vertically */
    vertical-align: middle; 
}

/* Specific Rank Styles */
.rank-checking {
    font-style: italic;
    color: #888;
    animation: pulse 1.5s infinite ease-in-out;
}

.rank-result {
    font-weight: bold;
    color: var(--primary-color-dark);
}

.rank-result a {
    color: var(--primary-color-dark);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.rank-result a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.rank-error {
    color: var(--flash-danger-text);
    font-weight: bold;
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: #666;
    padding: 20px 40px;
    margin-top: 30px; /* Space above footer */
    text-align: center;
    font-size: 0.9em;
    border-top: 1px solid var(--border-color);
}

footer hr {
    display: none; /* Hide the old hr */
}

/* Animation */
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Add Google Font link in header.php if not already present */
/* Example: <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> */