style.css

/* style.css - Innovative table styling */

/* Reset styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
}

/* Styling for the Streamlit table */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

th, td {
    padding: 12px 15px;
}

tbody tr {
    border-bottom: 1px solid #dddddd;
}

tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* Hover effect for table rows */
tbody tr:hover {
    background-color: #f1f1f1;
    cursor: default;
}
/* Table header */
th {
    background-color: #f2f3f5;  /* Light grey color */
    color: #333;  /* Slightly dark grey color */
    font-weight: bold;
    text-align: center;  /* Center align the header cells */
}

/* Table row animations on hover */
tbody tr {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

tbody tr:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Style for clickable links */
a {
    color: #1a0dab; /* A standard link color */
    text-decoration: none; /* Removes underline from links */
    transition: color 0.3s ease-in-out; /* Smooth transition for link color */
}

a:hover {
    color: #ff5722; /* Color when hovering over the link */
    text-decoration: underline; /* Underline on hover for emphasis */
}

/* Style for buttons with a modern look */
.button-style {
    color: #333; /* Dark text for good contrast */
    background-color: #ffffff; /* Light background for the button */
    border: 2px solid #007bff; /* Blue border */
    padding: 10px 25px; /* Top/bottom padding and left/right padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; /* Base font size for buttons */
    margin: 4px 2px;
    cursor: pointer; /* Changes cursor to pointer to indicate clickable */
    border-radius: 25px; /* Rounded corners for pill-like shape */
    transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: relative;
    overflow: hidden; /* Ensures nothing overflows from the button's boundaries */
    z-index: 1; /* Stack the pseudo-elements below the button text */
}

.button-style::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1.5);
    top: 100%;
    width: 120%;
    height: 100%;
    background-color: #007bff; /* Button hover color */
    border-radius: 25px;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.button-style:hover::before {
    top: -10%;
    height: 130%;
}

.button-style:hover {
    color: #fff; /* White text color for contrast */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
}