:root {
    --primary-green: #75AE6C;
    --secondary-green: #558849;
    --accent-green: #40916c;
    --light-green: #95d5b2;
    --lighter-green: #d8f3dc;
    --dark-green: #081c15;
    --text-light: #f8f9fa;
    --text-dark: #212529;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-dark);
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Main Content */
main.container {
    flex: 1 0 auto;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Banner and Header Styles */
.banner-header {
    position: relative;
    width: 100%;
    height: 180px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/toolsBanner.e81fdffb6e1d.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content {
    position: relative;
    text-align: center;
    color: var(--text-light);
    z-index: 1;
    width: 100%;
    padding: 2rem;
}

.banner-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    color: var(--text-light);
}

.banner-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 3px;
    opacity: 0.9;
    color: var(--text-light);
    text-transform: uppercase;
}

/* Navbar Styles */
.navbar {
    background-color: var(--primary-green);
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar .container-fluid {
    padding: 0 1rem;
}

.navbar-brand {
    color: var(--text-light) !important;
    font-weight: 600;
    font-size: 1.2rem;
}

.nav-link {
    color: var(--text-light) !important;
    background-color: var(--primary-green);
    font-weight: 500;
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    height: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link:hover {
    background-color: var(--secondary-green);
    color: var(--text-light) !important;
}

.nav-link.active {
    background-color: var(--accent-green);
    color: var(--text-light) !important;
    border-bottom: 2px solid var(--light-green);
}

/* Card Styles */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-header {
    background-color: var(--primary-green);
    color: var(--text-light);
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem;
}

.card-title {
    margin: 0;
    font-weight: 600;
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.btn-primary:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
}

.btn-secondary {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--text-light);
}

.btn-secondary:hover {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
    color: var(--text-light);
}

/* Form Styles */
.form-control {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(64, 145, 108, 0.25);
}

.form-label {
    font-weight: 500;
    color: var(--text-dark);
}

/* Footer Styles */
.footer {
    background-color: var(--dark-green);
    color: var(--text-light);
    padding: 2rem 0;
    flex-shrink: 0;
}

.footer-title {
    color: var(--light-green);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-link {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--light-green);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .banner-header {
        height: 150px;
    }
    
    .banner-title {
        font-size: 2rem;
    }
    
    .banner-subtitle {
        font-size: 1rem;
    }
    
    .navbar {
        padding: 0.5rem;
    }
    
    .nav-link {
        padding: 0.75rem !important;
        margin: 0.25rem 0;
    }

    .token-section .input-group {
        flex-wrap: nowrap;
    }

    .token-section .btn {
        white-space: nowrap;
        padding: 0.375rem 0.5rem;
    }
}

/* Dropdown Styles */
.dropdown-menu {
    margin-top: 0;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0;
}

.dropdown-item {
    color: var(--dark-green);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.dropdown-item:hover {
    background-color: var(--primary-green);
    color: var(--text-light);
}

.dropdown-item.active {
    background-color: var(--accent-green);
    color: var(--text-light);
}

.dropdown-header {
    color: var(--dark-green);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
}

.dropdown-divider {
    border-top: 1px solid var(--dark-green);
    margin: 0.5rem 0;
}

/* Alert Styles */
.alert {
    border: none;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: var(--lighter-green);
    color: var(--primary-green);
}

.alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.alert-warning {
    background-color: #fff3e0;
    color: #e65100;
}

.alert-danger {
    background-color: #ffebee;
    color: #b71c1c;
}

.alert-dismissible .btn-close {
    padding: 1rem;
}

/* Navbar Toggler */
.navbar-toggler {
    border-color: var(--text-light);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(248, 249, 250, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Token Section */
.token-section {
    padding: 0.5rem 1rem;
    background-color: var(--secondary-green);
    border-radius: 0;
    margin: 0;
}

.token-section .input-group {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
}

.token-section .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    height: 38px;
    font-size: 0.9rem;
}

.token-section .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-light);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.token-section .btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--text-light);
} 
/* ==========================================================================
   Modernisation layer
   --------------------------------------------------------------------------
   Appended rather than rewritten so the brand above stays the single source of
   the colours. Three things it does:

   1. Retints Bootstrap itself. This stylesheet loads after the Bootstrap CDN
      bundle, so redefining Bootstrap's own custom properties recolours every
      `bg-primary`, `btn-primary`, `text-primary` and `border-primary` on the site
      at once. Pages previously mixed Bootstrap's default blue (the "System
      Status" header, most buttons) with the brand green in the navbar and banner,
      which is why the site read as two designs stitched together -- and fixing it
      here needs no template change, so nothing that asserts on markup breaks.
   2. Adds the tokens the original set was missing: radii, shadows, spacing and a
      transition, so components stop each inventing their own.
   3. Makes the wide prediction tables usable, which matters more now they carry
      Stage / Waited / Elapsed / Time left columns.
   ========================================================================== */

:root {
    /* --- Bootstrap, in brand colours ------------------------------------- */
    --bs-primary: var(--primary-green);
    --bs-primary-rgb: 117, 174, 108;              /* #75AE6C */
    --bs-primary-text-emphasis: var(--dark-green);
    --bs-primary-bg-subtle: var(--lighter-green);
    --bs-primary-border-subtle: var(--light-green);
    --bs-link-color: var(--secondary-green);
    --bs-link-color-rgb: 85, 136, 73;             /* #558849 */
    --bs-link-hover-color: var(--accent-green);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- tokens the original set lacked ---------------------------------- */
    --surface: #ffffff;
    --surface-muted: #f6f8f6;
    --border-subtle: rgba(8, 28, 21, 0.10);
    --shadow-sm: 0 1px 2px rgba(8, 28, 21, 0.06);
    --shadow-md: 0 4px 16px rgba(8, 28, 21, 0.08);
    --shadow-lg: 0 12px 32px rgba(8, 28, 21, 0.12);
    --radius: 0.75rem;
    --transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Every animation in this layer is decorative, so it all goes away for anyone
   who has asked their system for less motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    background-color: var(--surface-muted);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Navigation ---------------------------------------------------------- */

/* Sticky so the token control and the section links stay reachable on the long
   documentation and results pages instead of being scrolled away. */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.nav-link {
    border-radius: var(--bs-border-radius-sm);
    transition: background-color var(--transition), color var(--transition);
}

/* The active page was distinguished by colour alone; an underline carries it for
   anyone who cannot separate the two greens. */
.nav-link.active {
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
}

/* Visible keyboard focus everywhere, which the original had nowhere. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}

/* --- Surfaces ------------------------------------------------------------ */

.card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

/* Only cards that are themselves a link or a control lift on hover; a static
   panel that moves under the cursor reads as clickable when it is not. */
a > .card:hover,
.card.is-interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.modal-content {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.35em 0.6em;
}

/* --- The prediction tables ---------------------------------------------- */

/* These carry up to seventeen columns, so they scroll sideways. Two affordances
   make that survivable: the header stays put while the body scrolls, and a soft
   edge shows there is more to the right rather than leaving the row looking
   truncated. */
.table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left / 3rem 100% no-repeat,
        linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right / 3rem 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(8, 28, 21, 0.12), transparent) left / 0.75rem 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(8, 28, 21, 0.12), transparent) right / 0.75rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.table-responsive > .table {
    margin-bottom: 0;
    background-color: transparent;
}

.table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--surface);
    border-bottom: 2px solid var(--light-green);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--secondary-green);
    white-space: nowrap;
}

.table > tbody > tr {
    transition: background-color var(--transition);
}

.table > tbody > tr:hover > * {
    background-color: var(--lighter-green);
}

.table td {
    vertical-align: middle;
}

/* The actions column holds one split button and must not wrap: the row grew to
   three lines high when the processing log was a second button beside the first.
   
   Pinned to the right edge as well. These tables are seventeen columns wide, so
   the actions sat off-screen until the user scrolled the whole way across -- and
   they are the reason to look at the row in the first place. */
.table th:last-child,
.table td:last-child {
    white-space: nowrap;
    text-align: right;
    position: sticky;
    right: 0;
    background-color: var(--surface);
}

/* Separates the pinned column from the cells scrolling underneath it. */
.table th:last-child::before,
.table td:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.5rem;
    transform: translateX(-100%);
    background: linear-gradient(to left, rgba(8, 28, 21, 0.08), transparent);
    pointer-events: none;
}

/* Stacking order inside the table, which the pinned column makes load-bearing.
   A positioned cell paints over an earlier one, so without this the actions cells
   of the rows *below* an open dropdown were drawn on top of its menu -- the menu
   appeared with its right-hand side sliced off. */
.table > tbody > tr > td:last-child {
    z-index: 1;
}

/* The row whose menu is open has to beat every cell after it. Set from Bootstrap's
   own dropdown events (see past_results.html) rather than with :has(), which this
   project cannot rely on across the browsers it supports. 1040 clears the sticky
   header at 3 and sits below the modal backdrop at 1050. */
.table > tbody > tr > td.dropdown-open {
    z-index: 1040;
}

/* The header's own cell must win over the pinned body cells where they meet. */
.table > thead th:last-child {
    z-index: 3;
}

/* Striping and hover paint the row, but a sticky cell needs its own opaque
   background or the scrolling cells show through it. */
.table-striped > tbody > tr:nth-of-type(odd) > td:last-child {
    background-color: #f5f7f5;
}

.table > tbody > tr:hover > td:last-child {
    background-color: var(--lighter-green);
}

/* A header with a title attribute is explaining a column; say so. */
.table th[title] {
    cursor: help;
    text-decoration: underline dotted 1px;
    text-underline-offset: 3px;
}

/* --- Processing log ------------------------------------------------------ */

/* Reads as a timeline rather than a list: the rail and node make the order and
   the interleaving of transitions with progress notes obvious at a glance. */
#processing-log-content .list-group-item {
    border: none;
    border-left: 2px solid var(--light-green);
    margin-left: 0.35rem;
    padding-left: 1.1rem;
    position: relative;
}

#processing-log-content .list-group-item::before {
    content: '';
    position: absolute;
    left: -0.3rem;
    top: 1.1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--light-green);
}

#processing-log-content .list-group-item:first-child::before,
#processing-log-content .list-group-item:last-child::before {
    background-color: var(--primary-green);
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 768px) {
    .banner-header {
        min-height: auto;
    }

    /* Full-width, comfortably tappable actions instead of a cramped row. */
    .table .btn-group,
    .table .btn {
        margin-bottom: 0.25rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }
}