@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

tbody tr.hour-light {
  /* subtle greenish veil to match your palette */
  box-shadow: inset 0 0 0 9999px rgba(42, 107, 47, 0.045);
}
tbody tr.hour-dark  {
  box-shadow: inset 0 0 0 9999px rgba(42, 107, 47, 0.085);
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #F7F7F7;
    color: #333333;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #2A6B2F;
    font-weight: 600;
    margin-bottom: 20px;
}

nav {
    background-color: #333333;
    padding: 10px 0;
    margin-bottom: 20px;
    border-radius: 5px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
}

nav ul li a.active, nav ul li a:hover {
    background-color: #4CAF50;
    color: #FFFFFF;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 6px 5px; line-height: 1.3;
    text-align: left;
    border: 1px solid #E0E0E0;
}

th {
    background-color: #2A6B2F;
    color: #FFFFFF;
    font-weight: 600;
}

.green {
    background-color: #D4EDDA;
}

.yellow {
    background-color: #FFF3CD;
}

.red {
    background-color: #F8D7DA;
}

.gray {
    background-color: #E9ECEF;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #2A6B2F;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    font-family: 'Open Sans', Arial, sans-serif;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
}

button:hover {
    background-color: #2A6B2F;
}

.message {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}

.message.success {
    background-color: #D4EDDA;
    color: #2A6B2F;
}

.message.error {
    background-color: #F8D7DA;
    color: #721C24;
}

/* Existing colors (example) */
tr.red   { background-color: rgba(255, 0, 0, 0.08); }
tr.green { background-color: rgba(0, 128, 0, 0.06); }

/* Highlight current hour row */
tbody tr.now {
  outline: 3px solid #1e90ff;    /* bright edge all around */
  outline-offset: -3px;           /* keep outline tight to the row */
  position: relative;             /* ensures outline renders cleanly in some browsers */
  background-image: linear-gradient(rgba(30,144,255,0.10), rgba(30,144,255,0.10));
  z-index: 1;
}

/* Optional: stronger emphasis if also red/green */
tbody tr.red.now   { background-color: rgba(255, 0, 0, 0.18); }
tbody tr.green.now { background-color: rgba(0, 128, 0, 0.16); }