/* Extra css not part of original design */

.info-box {
    opacity: 0.7;
}


.on, .off {
    border-radius: 2px;
    font-size: 10px;
    padding: 3px;
    color: white;
    font-weight: bold;
}
.on {
    background-color: #363d51;
}
.off {
    background-color: #b5b5b5;
}


.False {
    background-color: #b5b5b5;
}
.True {
    background-color: #363d51;
}
.output {
    width: 31px;
    display: inline-block;
    line-height: 10px;
    border-radius: 2px;
    font-weight: bold!important;
    color: white!important;
    border: none!important;
    height: 31px;
    vertical-align: middle;
    padding: 11px;
    margin-right: 3px;
}

.signal {
    display: inline-block;
    height: 11px;
    width: 11px;
    margin-left: 3px;
    border-radius: 50%;
}
.high { background-color: #8eca66 }
.medium { background-color: #f9ca0e}
.low { background-color: #e72323}


.section-subheading {
    color:#363d51;
    margin-bottom: 20px;
}

.column-list {
    display: inline-block;
    line-height: 10px;
    margin: 30px 60px 80px 0;
    vertical-align: top;
}

.check {
    width: 13px;
    display: inline-block;
    height: 13px;
    background-color:#363d51;
    border: 1px solid #363d51;
    border-radius: 50%;
}

.cross {
    width: 13px;
    display: inline-block;
    height: 13px;
    border: 2px solid #84858a;
    border-radius: 50%;
}

iframe {
    display: block;
    border: none;
}

/* Map tab short variant — layout hook only; loader chrome lives in layout.css */
#tab-1 .map.map__short #map {
    position: relative;
}

.page-skeleton--device-detail {
    background: #fff;
    min-height: 100%;
}

/* Org detail overlay sits on .app-main-body; keep page chrome grey, card white. */
.page-skeleton--organisation-detail {
    background: #ecf2f6;
    min-height: 100%;
}

.page-skeleton--organisation-detail > .section-inner.bg-white {
    background: #fff;
}

/* Device / organisation detail skeleton — specs table and sign-details markup */
.page-skeleton--device-detail .page-skeleton__line,
.page-skeleton--organisation-detail .page-skeleton__line {
    display: inline-block;
    background: #d8dee8;
    border-radius: 3px;
    vertical-align: middle;
}

.page-skeleton--device-detail .page-skeleton__line--heading {
    width: 5.5em;
    height: 1em;
}

.page-skeleton--device-detail .page-skeleton__sign-img {
    display: block;
    width: 11em;
    height: 11em;
    border-radius: 4px;
}

.page-skeleton--device-detail .page-skeleton__line--section {
    width: 9.5em;
    height: 1.35em;
}

.page-skeleton--device-detail .page-skeleton__line--label,
.page-skeleton--organisation-detail .page-skeleton__line--label {
    width: 8.5em;
    height: 1em;
}

.page-skeleton--device-detail .page-skeleton__line--value,
.page-skeleton--organisation-detail .page-skeleton__line--value {
    width: 11em;
    height: 1em;
}

.page-skeleton--device-detail .sign-technical-specs-table tr:nth-child(3n+1) .page-skeleton__line--value {
    width: 14em;
}

.page-skeleton--device-detail .sign-technical-specs-table tr:nth-child(3n+2) .page-skeleton__line--value {
    width: 9em;
}

.page-skeleton--device-detail .sign-technical-specs-table tr:nth-child(3n) .page-skeleton__line--value {
    width: 12em;
}

.page-skeleton--organisation-detail .sign-technical-specs-table tr:nth-child(1) .page-skeleton__line--value {
    width: 14em;
}

.page-skeleton--organisation-detail .sign-technical-specs-table tr:nth-child(2) .page-skeleton__line--value {
    width: 18em;
}

.page-skeleton--organisation-detail .sign-technical-specs-table tr:nth-child(3) .page-skeleton__line--value {
    width: 12em;
}

.page-skeleton--organisation-detail .sign-technical-specs-table td {
    padding: 0.65em 0;
    vertical-align: middle;
}

.page-skeleton--device-detail .col-label-heading,
.page-skeleton--organisation-detail .col-label-heading {
    color: transparent;
}

.page-skeleton--device-detail .heading {
    color: transparent;
}

.page-skeleton--device-detail .section-heading {
    color: transparent;
}

/* Edit form skeleton — shared by device, project, organisation, and holiday edit pages */
.page-skeleton--edit-form {
    background: #ecf2f6;
}

.page-skeleton--edit-form .page-skeleton__line {
    display: block;
    background: #d8dee8;
    border-radius: 3px;
}

.page-skeleton--edit-form .section-heading__small {
    color: transparent;
}

.page-skeleton--edit-form .page-skeleton__line--section-sm {
    width: 11em;
    height: 1.15em;
}

.page-skeleton--edit-form .page-skeleton__line--copy {
    width: 100%;
    max-width: 22em;
    height: 0.85em;
    margin-bottom: 0.55em;
}

.page-skeleton--edit-form .page-skeleton__line--copy-short {
    max-width: 16em;
}

.page-skeleton--edit-form .page-skeleton__line--field-label {
    width: 5.5em;
    height: 0.9em;
    margin-bottom: 0.45em;
}

.page-skeleton--edit-form .page-skeleton__line--field-label-long {
    width: 100%;
    max-width: 18em;
}

.page-skeleton--edit-form .page-skeleton__input {
    display: block;
    width: 100%;
    height: 3.25em;
    background: #d8dee8;
    border-radius: 3px;
    box-sizing: border-box;
}

.page-skeleton--edit-form .page-skeleton__graphic-field {
    display: block;
    overflow: hidden;
}

.page-skeleton--edit-form .page-skeleton__thumbnail {
    display: block;
    float: left;
    width: 70px;
    max-width: 15%;
    height: 70px;
    background: #d8dee8;
    border-radius: 3px;
}

.page-skeleton--edit-form .page-skeleton__input--select {
    float: right;
    width: 84%;
    padding-left: 10px;
    box-sizing: border-box;
}

.page-skeleton--edit-form .page-skeleton__field--graphic {
    overflow: hidden;
}

.page-skeleton--edit-form .page-skeleton__input--checkbox {
    width: 1.15em;
    height: 1.15em;
}

.page-skeleton--edit-form .page-skeleton__input--multiselect {
    height: 2.35em;
}

.page-skeleton--edit-form .page-skeleton__input--textarea {
    height: 9em;
}

.page-skeleton--edit-form .page-skeleton__map {
    width: 100%;
    min-height: 10em;
    margin-bottom: 0;
    background: #d8dee8;
    border-radius: 3px;
}

@media (min-width: 43.75em) {
    .page-skeleton--edit-form .page-skeleton__map {
        min-height: 16em;
    }
}

.page-skeleton--edit-form .footnote {
    margin-top: 0.75em;
}

.page-skeleton--edit-form .page-skeleton__line--footnote {
    width: 18em;
    height: 0.85em;
}

.page-skeleton--edit-form .page-skeleton__field--textarea {
    margin-top: 1.5em;
}

.page-skeleton--edit-form .page-skeleton__submit-row {
    font-size: 0;
}

.page-skeleton--edit-form .page-skeleton__button {
    display: inline-block;
    width: 4.5em;
    height: 2.85em;
    border-radius: 3px;
    background: #d8dee8;
    vertical-align: middle;
}

.page-skeleton--edit-form .page-skeleton__button--secondary {
    width: 5.25em;
    margin-left: 0.65em;
}

/* Route-aware page skeletons (overlay positioning; dismiss gates in layout.css) */
.page-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: #ecf2f6;
    min-height: 100%;
    pointer-events: none;
}

/* Projects / holidays list — stable columns while skeleton visible (devices signs: layout.css) */
table.item-listings__schools.js-table-with-skeleton {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

/* Holidays list — stable columns and height while skeleton is visible */
table.item-listings__holidays.js-table-with-skeleton {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

table.item-listings__holidays.js-table-with-skeleton thead th {
    padding-right: 1.6em;
}

table.item-listings__schools.js-table-with-skeleton thead th {
    padding-right: 1.6em;
}

/* In-table skeleton rows (projects / holidays / organisations lists) */
.page-skeleton-tbody .item-cell {
    overflow: hidden;
    vertical-align: middle;
}

.page-skeleton-tbody__row .page-skeleton__strip {
    display: block;
    width: 90%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-skeleton-tbody .col-med .page-skeleton__strip,
.page-skeleton-tbody .col-medium .page-skeleton__strip {
    max-width: 5.5em;
}

.page-skeleton-tbody .col-large .page-skeleton__strip {
    max-width: 9em;
}

.page-skeleton-tbody .col-xlarge .page-skeleton__strip {
    max-width: 15em;
}

.page-skeleton-tbody .col-sign {
    overflow: visible;
    text-align: center;
}

.page-skeleton-tbody .col-sign .page-skeleton__sign-cell {
    display: inline-block;
    vertical-align: middle;
}

.page-skeleton-tbody__signs {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: normal;
}

.page-skeleton-tbody__signs .item {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.page-skeleton__inner {
    padding-top: 0;
}

/* Shared strip / icon primitives */
.page-skeleton__strip,
.page-skeleton__icon {
    display: block;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Solid fill only when not shimmering — must not override .page-skeleton__shimmer gradient. */
.page-skeleton__strip:not(.page-skeleton__shimmer),
.page-skeleton__icon:not(.page-skeleton__shimmer) {
    background: #d8dee8;
}

.page-skeleton__strip.page-skeleton__shimmer,
.page-skeleton__icon.page-skeleton__shimmer {
    background: linear-gradient(90deg, #d8dee8 0%, #e8ecf2 50%, #d8dee8 100%);
    background-size: 200% 100%;
    animation: page-skeleton-shimmer 1.4s ease-in-out infinite;
}

.page-skeleton__strip {
    height: 14px;
}

.page-skeleton__icon {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

.page-skeleton__icon--sm {
    width: 45px;
    height: 45px;
}

.page-skeleton__strip--xs { width: 4em; }
.page-skeleton__strip--heading { width: 10em; height: 20px; margin-bottom: 1.2em; }
.page-skeleton__strip--line { width: 100%; margin-bottom: 12px; }
.page-skeleton__strip--name { width: 3em; height: 12px; margin: 1em 0 0.5em; }
.page-skeleton__strip--locale { width: 10em; height: 10px; max-width: 12em; }

@media (prefers-reduced-motion: reduce) {
    .page-skeleton__shimmer {
        animation: none;
        background: #d8dee8;
    }
}

/* Project detail — map block + assigned signs, schedule, manual control */
.page-skeleton--project-detail {
    background: #ecf2f6;
}

.page-skeleton--project-detail .page-skeleton__map-block {
    background-color: #d8dee8;
    position: relative;
    z-index: 0;
}

.page-skeleton--project-detail .page-skeleton__line {
    display: block;
    background: #d8dee8;
    border-radius: 3px;
}

.page-skeleton--project-detail .section-heading,
.page-skeleton--project-detail .sign-name,
.page-skeleton--project-detail .sign-locale {
    color: transparent;
}

/* Overlay signs sit above the map shimmer (grid cols via --assigned-signs-cols on .assigned-signs-list--grid) */
.page-skeleton--project-detail .page-skeleton__assigned-signs {
    position: relative;
    z-index: 2;
}

/* Overlay + deferred sign skeletons share tile chrome */
.page-skeleton--project-detail .page-skeleton__assigned-item,
.js-deferred-signs-skeleton .page-skeleton__assigned-item {
    display: block;
    text-align: center;
    vertical-align: top;
    margin: 0;
    width: auto;
}

.page-skeleton--project-detail .page-skeleton__assigned-item .sign-img,
.js-deferred-signs-skeleton .page-skeleton__assigned-item .sign-img {
    float: none;
    margin: 0 auto;
    display: block;
}

.page-skeleton--project-detail .page-skeleton__assigned-icon,
.js-deferred-signs-skeleton .page-skeleton__assigned-icon {
    display: block;
    width: 4.8em;
    height: 4.8em;
    border-radius: 4px;
    background: #d8dee8;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (min-width: 43.75em) {
    .page-skeleton--project-detail .page-skeleton__assigned-icon,
    .js-deferred-signs-skeleton .page-skeleton__assigned-icon {
        width: 8em;
        height: 8em;
    }
}

@media (min-width: 80em) {
    .page-skeleton--project-detail .page-skeleton__assigned-icon,
    .js-deferred-signs-skeleton .page-skeleton__assigned-icon {
        width: 10em;
        height: 10em;
    }
}

.page-skeleton--project-detail .page-skeleton__strip--name,
.js-deferred-signs-skeleton .page-skeleton__strip--name {
    margin-left: auto;
    margin-right: auto;
}

.page-skeleton--project-detail .page-skeleton__strip--locale,
.js-deferred-signs-skeleton .page-skeleton__strip--locale {
    margin-left: auto;
    margin-right: auto;
}

.page-skeleton--project-detail .page-skeleton__line--footnote {
    width: 100%;
    max-width: 42em;
    height: 0.85em;
}

.page-skeleton--project-detail .page-skeleton__line--section {
    width: 9em;
    height: 1.35em;
    margin-bottom: 0.35em;
}

.page-skeleton--project-detail .page-skeleton__line--intro {
    width: 100%;
    max-width: 24em;
    height: 0.9em;
}

.page-skeleton--project-detail .page-skeleton__line--time-label {
    width: 1.5em;
    height: 0.9em;
}

.page-skeleton--project-detail .page-skeleton__schedule-wrap {
    margin-top: 1em;
}

.page-skeleton--project-detail .page-skeleton__schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35em;
    margin-bottom: 0.75em;
}

.page-skeleton--project-detail .page-skeleton__schedule-col {
    flex: 1 1 2.5em;
    min-width: 2.5em;
    height: 2em;
    background: #d8dee8;
    border-radius: 3px;
}

.page-skeleton--project-detail .page-skeleton__schedule-col--tall {
    height: 4.5em;
}

.page-skeleton--project-detail .page-skeleton__schedule-buttons {
    margin-top: 1em;
    font-size: 0;
}

.page-skeleton--project-detail .page-skeleton__button--schedule {
    display: inline-block;
    width: 7em;
    height: 2.5em;
    border-radius: 3px;
    background: #d8dee8;
    vertical-align: middle;
    margin-right: 0.5em;
}

.page-skeleton--project-detail .page-skeleton__manual-control {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.page-skeleton--project-detail .page-skeleton__manual-item {
    flex: 1 1 6em;
    min-width: 6em;
    padding: 1em;
    text-align: center;
}

.page-skeleton--project-detail .page-skeleton__strip--manual-label {
    width: 5em;
    height: 10px;
    margin: 0 auto 0.75em;
}

.page-skeleton--project-detail .page-skeleton__strip--manual-time {
    width: 4em;
    height: 14px;
    margin: 0 auto;
}

/* Shared map placeholder (device edit skeleton) */
.page-skeleton__map {
    width: 100%;
    min-height: 10em;
    margin-bottom: 0;
    background: #d8dee8;
}

@media (min-width: 43.75em) {
    .page-skeleton__map {
        min-height: 16em;
    }
}

/* Device detail — overview panel skeleton uses real sign-details grid */

.page-skeleton__generic {
    background: #fff;
    padding: 24px;
    border-radius: 4px;
}

.page-skeleton__generic .page-skeleton__strip--line {
    display: block;
}

/* Lighthouse accessibility: WCAG AA contrast on light surfaces */
body {
    color: #3a4049 !important;
    background-color: #ecf2f6;
}

a,
.link {
    color: #1e5a9e;
}

p a:hover,
.link:hover,
p a:focus,
.link:focus {
    color: #164a85;
    border-color: #1e5a9e;
}

.page-subheading,
.tab-link,
.item-listings .sub-info,
.sub-info,
.topbar-user .user-email,
.button-subtext {
    color: #5a6575;
}

.tab-link.active {
    color: #3a4049;
}

.page-subheading strong {
    color: #1e5a9e;
}

table.dataTable.display tbody tr.odd .sub-info,
table.dataTable.display tbody tr.odd a {
    color: #1e5a9e;
}

table.dataTable.display tbody tr.odd .sub-info {
    color: #5a6575;
}

@media (min-width: 80em) {
    .app-topbar {
        color: #3a4049;
    }

    .app-topbar .topbar-user .user-email {
        color: #5a6575;
    }
}

/* Dark sidebar (header.app-header) — WCAG AA on #363d51 */
.app-header .mainnav-link {
    color: #c8d2ea;
}

.app-header .mainnav-link:hover,
.app-header .mainnav-link:focus,
.app-header .mainnav-link.active {
    color: #fff;
}

.app-header .footer-links .link,
.app-header .footer-copyright .link {
    color: #d8e6ff;
    border-bottom-color: rgba(216, 230, 255, 0.35);
}

.app-header .footer-links .link:hover,
.app-header .footer-links .link:focus,
.app-header .footer-copyright .link:hover,
.app-header .footer-copyright .link:focus {
    color: #fff;
    border-bottom-color: #fff;
}

/* Mobile footer on tinted panel */
.app-footer .footer-links .link,
.app-footer .footer-copyright .link {
    color: #1e5a9e;
}

/* DataTables pagination + table-bottom bar (white background) */
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.next.disabled {
    color: #525252 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #525252 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background-color: #1e5a9e;
}

.dataTables_info {
    color: #525252 !important;
}

.table-bottom {
    color: #3a4049;
    background-color: #fff;
}

.table-bottom .dataTables_paginate a.paginate_button:not(.disabled):not(.current),
.dataTables_wrapper .dataTables_paginate a.paginate_button:not(.disabled):not(.current) {
    color: #3a4049 !important;
}

/* Single-page tables: hide pagination chrome without jQuery layout reads */
.dataTables_wrapper.is-single-page .dataTables_info,
.dataTables_wrapper.is-single-page .dataTables_paginate {
    display: none !important;
}

@media only screen and (min-width: 1280px) {
    html.is-page-ready .table-bottom.is-visible {
        display: block;
    }
}

/* Lighthouse a11y: project detail sign grid + schedule labels */
.assigned-signs-list .sign-locale {
    margin: 0;
    color: #5a6575;
}

/* Prevent .schedule-control table styles from shifting the project header toggle */
.app-main-headings .page-filter .schedule-control.schedule-control__manual {
    min-width: 0;
    max-width: none;
    margin: 0;
}

.schedule-control__manual .activate-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.schedule-control .schedule-length,
.schedule-control .schedule-remaining {
    color: #363d51;
    font-weight: 500;
}

.leaflet-popup-content {
    width: 28em !important;
    margin: 5px 10px !important;
}

.threshold-schedule-summary {
    margin-bottom: 20px;
    line-height: 1.8;
}

.threshold-day-table-wrap {
    margin-top: 15px;
    overflow-x: auto;
}

.threshold-day-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.threshold-day-table th,
.threshold-day-table tr td {
    padding: 8px 10px;
    text-align: center;
    vertical-align: top;
    border: 1px solid #ddd;
}

.threshold-day-table thead th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.threshold-day-table th.threshold-window-label {
    width: 5.5rem;
    text-align: left;
    background-color: #f5f5f5;
    font-weight: bold;
    white-space: nowrap;
}

.threshold-enabled {
    color: #2d7d2d;
    font-weight: bold;
}

.threshold-window-info {
    margin: 0;
}

.threshold-window-info p {
    margin: 0 0 4px;
    line-height: 1.35;
}

.threshold-window-info p:last-child {
    margin-bottom: 0;
}

.threshold-low {
    color: #e72323;
}

.threshold-high {
    color: #2d7d2d;
}

.threshold-disabled {
    color: #999;
}

.threshold-no-schedule {
    padding: 20px 0;
    color: #666;
}