@import url('./fonts.css');

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

a.active {
    color: red;
}

a.deleteBtn {
    color: rgb(220,0,0);
}

button.iconBtn {
    background-color: transparent;
    padding: 0;
    border: 0;
    cursor: pointer;
}

table {
    font-size: 14px;
    font-variant-numeric: lining-nums tabular-nums; /* give numbers in table monospaced width and place on baseline */
}
table th {
    white-space: nowrap;
}
.table td,
.table th {
     padding: 8px;
}

/* Customize datable's sorting arrows in table header */
table.dataTable thead th::before,
table.dataTable thead th::after  {
    font-weight: 400;
    font-size: 0.6em;
}
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
    content: "▲";
    bottom: 1.9em;
    right: 8px;
}
table.dataTable thead .sorting::after, 
table.dataTable thead .sorting_asc::after, 
table.dataTable thead .sorting_desc::after, 
table.dataTable thead .sorting_asc_disabled::after, 
table.dataTable thead .sorting_desc_disabled::after {
    content: "▼";
    bottom: 1.0em;
    right: 8px;
}
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
    padding-right: 20px;
}

/* Color rows on hover */
table.dataTable tbody tr:hover {
    background-color: #f6f6f6;
}

/* Color sorting columns */
table.dataTable tbody td.sorting_1,
table.dataTable tbody td.sorting_2,
table.dataTable tbody td.sorting_3 {
    background-color: #f6f6f6;
}

/* Datatatable pagination controls shown above/below table */
.table-ctrl {
    display:flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
}
.table-ctrl.bot {
    margin-top:20px;
}

.table-ctrl .dataTables_info {
    padding-top: 0 !important;
}
.table-ctrl .dataTables_length > label {
    margin: 0;
    font-weight: inherit !important;
}

/* (participant) Filter can shown above tables to the left of pagination */
.table-filter {
    float:left;
}
.table-filter select.form-control {
    min-width: 150px;
}

.table-filter.active .select2-selection__rendered {
    color: #027cff;
    font-weight: normal;
}

/* Inactive table rows */
.table tr.inactive:not(:hover) {
    color: #a4a4a4;
}
.table tr.inactive:not(:hover) a {
    color: inherit;
}

/* Icons in table rows */
.inv-status-hit {
    color: #90d700;
}
.inv-status-miss {
    color: #d70000;
}
.list-icon { 
    color: #c3bea9;
    margin-left: 7px;
}

/* Batch delete table header cell */
table.dataTable th .batch-delete details {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}
table.dataTable th .batch-delete details summary {
    display:inline-block;
    user-select: none;
}
table.dataTable th .batch-delete details > div {
    position: absolute;
    background-color: white;
    padding: 10px 20px;
    border-radius: 3px;
    border: solid 1px #dee2e6;
    z-index: 10;
}
table.dataTable th .batch-delete details > div a {
    font-weight: normal;
    color: rgb(220,0,0);
}

/* Content in tooltips */
.tippy-tooltip table {
    margin: 5px;
}
.tippy-tooltip table td,
.tippy-tooltip table th {
    color: white;
    font-size: 12px;
    padding: 1px 5px;
    text-align: left;
}
.tippy-tooltip table td.num,
.tippy-tooltip table .th.num {
    text-align: right;
}

.tippy-tooltip .comment {
    margin: 5px;
    color: white;
    white-space: pre;
    text-align: left;
}



#adminVersion {
    font-size: 11px;
    text-align: center;
    padding: 30px;
    color: #a8a8a8;
}
#adminVersion a {
    color: inherit;
    font-weight: 500;
}



/* Navigation UI */

#nav-main {
    background-color: #00A8E8;
    overflow: auto;
}
#nav-main.test {
    background-color: #FF7070;
}
#nav-main.development {
    background-color: #5E8F5D;
}
#nav-main .container {
    display:flex;
    min-height: 50px;
}
#nav-main .container .left {
    display: flex;
    min-width: 120px;
}
#nav-main .container .mid {
    display: flex;
    flex-grow: 1;
}
#nav-main .container .right {
    display: flex;
}
#nav-main a {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    text-decoration: none;
    font-size: 18px;
    white-space: nowrap;
}
#nav-main .left a {
    padding-left: 0;
}
#nav-main .left .deployment {
    color: white;
    margin-top: 5px;
    margin-left: -10px;
    font-size: 12px;
}
#nav-main .mid a:hover,
#nav-main .right a:hover {
    background-color: white;
    color: #00A8E8;
}
#nav-main .mid a.active {
    font-weight: bold;
}

#nav-sub {
    background-color: #f4f2eb;
}
#nav-sub ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
#nav-sub a {
    display: inline-block;
    padding: 10px 20px;
    color: #59574f;
    text-decoration: none;
    white-space: nowrap;
}
#nav-sub a:hover {
    background-color: white;
}
#nav-sub a.active {
    font-weight: bold;
}
#nav-sub a.project-title {
    padding-left: 0;
    min-width: 120px;
}
#nav-sub a.project-title:hover {
    background-color: inherit;
}



/* Page content heading (title and buttons) */

#heading {
    margin-bottom: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#heading h2 {
    display: inline;
    padding-right: 20px;
}
#heading a {
    background-color: #f4f2eb;
    text-decoration: none;
    border-radius: 3px;
    padding: 2px 15px;
    /* color: inherit; */
}
#heading a:hover {
    background-color: #e8e5db;
}
#heading .spacer {
    flex-grow: 1;
}



/* General info box with info/tips */
.tips {
    background-color: #f4f2eb;
    color: #5b5951;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 1rem;
    font-size: 14px;
}
.tips ul {
    padding-left: 15px;
}
.tips > :last-child {
    margin-bottom: 0;
}



/* Login page */

#login {
    padding-top: 10px;
    margin: auto;
    max-width: 260px;
}
#login .method-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 1rem;
}
#login .btn.surfconext {
    background-color: #008a00;
    border-color: #008a00;
    color: white;
}
#login .btn.local {
    background-color: #00A8E8;
    border-color: #00A8E8;
    color: white;
}
#login .btn:hover {
    opacity: 0.8;
}
#login hr {
    margin: 40px;
}



/* Projects page */
#projectsTable td.group-name,
#projectsTable td.locale,
#projectsTable td.time-zone {
    white-space: nowrap;
}
#projectsTable tr.parent td {
    cursor: pointer;
}
#projectsTable tr.parent.open td,
#projectsTable tr.child td {
    background-color: #f6f6f6;
}
#projectsTable tr.child td {
    border-top: none;
    border-bottom: none;
}
#projectsTable tr td.group-name {
    border-left: solid 7px;
}
#projectsTable tr.parent:not(.open) td.group-name {
    border-left-color: transparent !important; /* overwrite inline style color */
}
#projectsTable tr.parent td.group-name::before {
    content: '⏷';
    margin-right: 10px;
    display: inline-block;
}
#projectsTable tr.parent.open td.group-name::before {
    content: '⏶';
}
#projectsTable td.actions > span {
    white-space: nowrap;
    display: flex;
    gap: 7px;
}

/* Project form contains textareas with JSON code */
textarea.code {
    font-family: monospace;
    font-size: 12px;
}



/* Users page */

#usersTable tr.admin {
    font-weight: 700;
}



/* Import pages */

.table.import td.warn {
    color: #ff4b05;
    font-weight: 500;
    background-color: #ffefe9;
}
.table.import select {
    max-width: 100px;
    text-overflow: ellipsis;
}



/* Activity page */

#projectActivity .grid {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#projectActivity .grid .left {
    flex-grow: 1;
}
#projectActivity .grid .right {
    flex-grow: 0;
}
#projectActivity .grid .right form {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#projectActivity .grid .right select {
    flex-grow: 1;
    max-width: 200px;
    font-size: 12px;
    border-radius: 4px;
    border: solid 1px #b3b3b3;
}



/* System page */

table.system td.err {
    color: red;
}



/* Calendar page */
.fc-toolbar {
    justify-content: flex-end;
    gap: 20px;
}
.fc-toolbar h2 {
    font-weight: inherit;
    font-size: 1em;
}
.fc-button .fc-icon {
    font-size: 1em;
    margin-top: -0.1em;
}

.fc-bgevent {
    background-color: transparent;
    border: dashed #333 2px
}
.fc-time-grid-event {
    padding: 4px 6px;
}
.fc-day-grid-event {
    padding-left: 4px;
}
.fc-event {
    border: none;
    background-color: rgb(72, 122, 166); /* blue-like */
}
.fc-event.hasResponse {
    background-color: rgb(66, 123, 91); /* green-like */
}
.fc-event.isPast:not(.hasResponse) {
    background-color: rgb(166, 64, 64); /* red-like */
}
.fc-event.isDisabled {
    opacity: 0.5;
}