body { background-color:#D9D9D9}
td.textright {text-align: right;}
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { text-decoration: underline; }
#mainbody .panel { margin-top: 1em; }

.timeline-lane {
    position: relative;
    height: 28px;
    margin-bottom: 2px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
.timeline-lane-label {
    display: inline-block;
    width: 140px;
    font-size: 0.85em;
    font-weight: bold;
    vertical-align: top;
}
.timeline-track {
    position: relative;
    display: inline-block;
    width: calc(100% - 150px);
    height: 100%;
    vertical-align: top;
}
.timeline-bar {
    position: absolute;
    top: 2px;
    height: 24px;
    background-color: #337ab7;
    color: #fff;
    font-size: 0.75em;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #204d74;
    padding-left: 2px;
}
.timeline-bar.reaction {
    background-color: #5cb85c;
    border-color: #398439;
}
.timeline-ruler {
    height: 20px;
    position: relative;
    margin-left: 150px;
    margin-top: 0.5em;
    border-bottom: 1px solid #999;
    font-size: 0.75em;
}
.timeline-ruler-tick {
    position: absolute;
    top: 0;
    border-left: 1px solid #999;
    padding-left: 2px;
}

/*
 * Dark mode, driven purely by the OS/browser preference (no in-page toggle).
 * Scoped to this app's own content - #mainbody and its own panels/tables/forms/
 * timeline - plus the shared body background. The shared site chrome included from
 * /bootstrap/ and /menu/ (navbar, footer) is untouched: the navbar is already
 * Bootstrap's dark "navbar-inverse" style, and the footer sets its own explicit
 * light background, so both stay as they are regardless of this block.
 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #ddd;
    }

    #mainbody a {
        color: #6ab0f3;
    }

    #mainbody .panel {
        background-color: #262626;
        border-color: #3a3a3a;
    }
    #mainbody .panel-default > .panel-heading {
        background-color: #2f2f2f;
        border-color: #3a3a3a;
        color: #eee;
    }
    #mainbody .panel-title,
    #mainbody .panel-body,
    #mainbody label {
        color: #ddd;
    }

    #mainbody .table {
        background-color: #262626;
        color: #ddd;
    }
    #mainbody .table > thead > tr > th,
    #mainbody .table > tbody > tr > td,
    #mainbody .table > tbody > tr > th {
        border-color: #3a3a3a;
    }
    #mainbody .table-striped > tbody > tr:nth-of-type(odd),
    #mainbody .table-striped > tbody > tr:nth-of-type(odd) > td,
    #mainbody .table-striped > tbody > tr:nth-of-type(odd) > th {
        background-color: #3a3a3a;
    }
    #mainbody .table-bordered,
    #mainbody .table-bordered > thead > tr > th,
    #mainbody .table-bordered > tbody > tr > td {
        border-color: #3a3a3a;
    }

    #mainbody input,
    #mainbody select,
    #mainbody textarea,
    #mainbody .form-control {
        background-color: #333;
        color: #eee;
        border-color: #555;
    }
    #mainbody input::placeholder,
    #mainbody textarea::placeholder {
        color: #999;
    }

    #mainbody pre {
        background-color: #1e1e1e;
        color: #ddd;
        border-color: #3a3a3a;
    }

    #mainbody .btn-default,
    #mainbody button,
    #mainbody button.btn-default {
        background-color: #3a3a3a;
        color: #eee;
        border-color: #555;
    }
    #mainbody button.btn-primary {
        background-color: #204d74;
        color: #fff;
        border-color: #122b40;
    }

    .timeline-lane {
        background-color: #2c2c2c;
        border-bottom-color: #3a3a3a;
    }
    .timeline-ruler,
    .timeline-ruler-tick {
        border-color: #555;
    }
}