/* Glass components for the whole app, after the dashboard design. Colours come from the tokens in app-theme.css.
   Bootstrap 5.3 compiles component colours as literals, so components are re-pointed through their own variables. */

/* Page frame: list, edit and custom pages, and the dashboard ---------------------------------------------------- */

.app-page-host {
    padding: 1rem;
}

.app-page {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-frame-border);
    border-radius: var(--app-radius-frame);
    background: var(--app-frame-bg);
    box-shadow: var(--app-frame-shadow);
}

.app-page--fill {
    height: 100%;
    min-height: 0;
}

.app-page-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--app-card-border);
    /* Rounded here rather than clipping the frame, so dropdowns in page toolbars are never cut off. */
    border-radius: calc(var(--app-radius-frame) - 1px) calc(var(--app-radius-frame) - 1px) 0 0;
    background: var(--app-topbar-bg);
    color: var(--app-topbar-text);
}

page-header {
    display: block;
}

.app-page-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--app-pill-border);
    border-radius: 50%;
    color: var(--app-accent-1);
    font-size: 1rem;
    --fa-primary-color: var(--app-accent-1);
    --fa-secondary-color: var(--app-accent-2);
    --fa-secondary-opacity: .45;
}

.app-page-title {
    margin: 0;
    color: var(--app-topbar-title);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.app-page-subtitle {
    padding: .125rem .625rem;
    border: 1px solid var(--app-pill-border);
    border-radius: 999px;
    background: var(--app-pill-bg);
    color: var(--app-topbar-text);
    font-size: .6875rem;
}

.app-page-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-inline-start: auto;
}

.app-page-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding: 1rem;
}

.app-page--fill > .app-page-body {
    flex: 1 1 0;
}

.app-page-toolbar:empty {
    display: none;
}

/* Glass card (dashboard widgets and custom panels) ---------------------------------------------------------------- */

.app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .875rem 1rem 1rem;
    border: 1px solid var(--app-card-border);
    border-radius: var(--app-radius-card);
    /* The highlight is a background layer (not ::before), so it never paints over unpositioned content. */
    background-color: var(--app-card-bg);
    background-image: var(--app-card-highlight);
    box-shadow: var(--app-card-shadow);
    -webkit-backdrop-filter: var(--app-blur);
    backdrop-filter: var(--app-blur);
}

.app-card-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.5rem;
    margin-bottom: .5rem;
}

.app-card-title {
    margin: 0;
    color: var(--app-text);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.app-card-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.app-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 10px;
    background: var(--app-overlay-bg);
    color: var(--app-muted);
    font-size: .8125rem;
}

.app-card-overlay .spinner-border {
    color: var(--app-accent-1);
}

.app-card-overlay.is-error {
    color: var(--bs-danger-text-emphasis, #dc3545);
}

.app-card-subtitle {
    margin: -.375rem 0 0;
    color: var(--app-muted);
    font-size: .6875rem;
}

.app-card-figure {
    margin-inline-start: auto;
    color: var(--app-text);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-empty {
    margin: auto;
    color: var(--app-muted);
    font-size: .8125rem;
}

/* Small floating surfaces, e.g. the geofence drawing toolbar. */
.app-glass {
    border: 1px solid var(--app-card-border);
    border-radius: var(--app-radius-card);
    background-color: var(--app-map-panel-bg);
    background-image: var(--app-card-highlight);
    box-shadow: var(--app-card-shadow);
    color: var(--app-text);
    -webkit-backdrop-filter: var(--app-blur-map);
    backdrop-filter: var(--app-blur-map);
}

/* Bootstrap: cards ------------------------------------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--app-card-bg);
    --bs-card-color: var(--app-text);
    --bs-card-border-color: var(--app-card-border);
    --bs-card-border-radius: var(--app-radius-card);
    --bs-card-inner-border-radius: calc(var(--app-radius-card) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--app-text);
    background-image: var(--app-card-highlight);
    box-shadow: var(--app-card-shadow);
}

.card-header {
    border-bottom-color: var(--app-grid-line);
    font-weight: 600;
}

.card-footer {
    border-top-color: var(--app-grid-line);
}

/* A card inside a card is a flat section, not another glass layer. */
.card .card {
    --bs-card-bg: rgba(var(--app-accent-rgb), .03);
    --bs-card-border-color: var(--app-border);
    background-image: none;
    box-shadow: none;
}

/* Bootstrap: buttons ----------------------------------------------------------------------------------------------- */

.btn-primary {
    --bs-btn-color: var(--app-button-text);
    --bs-btn-bg: var(--app-accent-3);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--app-button-text);
    --bs-btn-hover-bg: var(--app-accent-3);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
    --bs-btn-active-color: var(--app-button-text);
    --bs-btn-active-bg: var(--app-accent-4);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--app-button-text);
    --bs-btn-disabled-bg: var(--app-accent-3);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--app-button-bg);
    box-shadow: 0 4px 14px var(--app-glow);
}

.btn-primary:hover {
    background-image: var(--app-button-bg-hover);
}

.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
    background-image: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
    box-shadow: none;
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-input-bg);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-hover-bg);
    --bs-btn-hover-border-color: rgba(var(--app-accent-rgb), .45);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-selected-bg);
    --bs-btn-active-border-color: var(--app-accent-1);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-border);
}

.btn-outline-secondary {
    --bs-btn-bg: transparent;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: rgba(var(--app-accent-rgb), .55);
    --bs-btn-hover-color: var(--app-button-text);
    --bs-btn-hover-bg: var(--app-accent-3);
    --bs-btn-hover-border-color: var(--app-accent-3);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
    --bs-btn-active-color: var(--app-button-text);
    --bs-btn-active-bg: var(--app-accent-4);
    --bs-btn-active-border-color: var(--app-accent-4);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-border-color: var(--app-border);
}

/* Bootstrap: forms ------------------------------------------------------------------------------------------------- */

.form-control,
.form-select {
    border-color: var(--app-border);
    background-color: var(--app-input-bg);
    color: var(--app-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent-1);
    background-color: var(--app-surface);
    box-shadow: var(--app-focus-ring);
    color: var(--app-text);
}

.form-control::placeholder {
    color: var(--app-muted);
    opacity: 1;
}

.input-group-text {
    border-color: var(--app-border);
    background-color: var(--app-surface-2);
    color: var(--app-muted);
}

.form-label,
.col-form-label {
    color: var(--app-muted);
}

.form-check-input {
    border-color: var(--app-border);
    background-color: var(--app-input-bg);
}

.form-check-input:checked {
    border-color: var(--app-accent-3);
    background-color: var(--app-accent-3);
}

.form-check-input:focus {
    border-color: var(--app-accent-1);
    box-shadow: var(--app-focus-ring);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2338d6f5'/%3e%3c/svg%3e");
}

/* Bootstrap: popups, lists and navigation --------------------------------------------------------------------------- */

.dropdown-menu {
    --bs-dropdown-bg: var(--app-popover-bg);
    --bs-dropdown-color: var(--app-text);
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: .625rem;
    --bs-dropdown-link-color: var(--app-text);
    --bs-dropdown-link-hover-color: var(--app-text);
    --bs-dropdown-link-hover-bg: var(--app-hover-bg);
    --bs-dropdown-link-active-color: var(--app-button-text);
    --bs-dropdown-link-active-bg: var(--app-accent-3);
    --bs-dropdown-divider-bg: var(--app-grid-line);
    --bs-dropdown-header-color: var(--app-muted);
    box-shadow: var(--app-popover-shadow);
}

.modal {
    --bs-modal-bg: var(--app-popover-bg);
    --bs-modal-color: var(--app-text);
    --bs-modal-border-color: var(--app-border);
    --bs-modal-border-radius: var(--app-radius-card);
    --bs-modal-inner-border-radius: calc(var(--app-radius-card) - 1px);
    --bs-modal-box-shadow: var(--app-popover-shadow);
    --bs-modal-header-border-color: var(--app-grid-line);
    --bs-modal-footer-border-color: var(--app-grid-line);
}

.modal-backdrop {
    --bs-backdrop-bg: #02070f;
    --bs-backdrop-opacity: .55;
}

.tooltip {
    --bs-tooltip-bg: var(--app-popover-bg);
    --bs-tooltip-color: var(--app-text);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--app-text);
    --bs-list-group-border-color: var(--app-grid-line);
    --bs-list-group-action-color: var(--app-text);
    --bs-list-group-action-hover-color: var(--app-text);
    --bs-list-group-action-hover-bg: var(--app-hover-bg);
    --bs-list-group-action-active-color: var(--app-text);
    --bs-list-group-action-active-bg: var(--app-selected-bg);
    --bs-list-group-active-color: var(--app-nav-active-text);
    --bs-list-group-active-bg: var(--app-accent-3);
    --bs-list-group-active-border-color: transparent;
    --bs-list-group-disabled-color: var(--app-muted);
    --bs-list-group-disabled-bg: transparent;
}

.list-group-item.active {
    background-image: var(--app-nav-active-bg);
}

.pagination {
    --bs-pagination-color: var(--app-text);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--app-border);
    --bs-pagination-hover-color: var(--app-text);
    --bs-pagination-hover-bg: var(--app-hover-bg);
    --bs-pagination-hover-border-color: rgba(var(--app-accent-rgb), .45);
    --bs-pagination-focus-color: var(--app-text);
    --bs-pagination-focus-bg: var(--app-hover-bg);
    --bs-pagination-focus-box-shadow: var(--app-focus-ring);
    --bs-pagination-active-color: var(--app-pill-active-text);
    --bs-pagination-active-bg: var(--app-pill-active-bg);
    --bs-pagination-active-border-color: var(--app-pill-active-bg);
    --bs-pagination-disabled-color: var(--app-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--app-border);
}

/* Syncfusion grid pager (.e-pager): colours only, so it reads like the .pagination above.
   Buttons, icons and layout stay Syncfusion's own — only colour tokens are overridden. */

.e-pager,
.e-pager .e-pagercontainer {
    background: transparent;
    border-color: transparent;
}

.e-pager .e-numericitem {
    background: transparent;
    color: var(--app-text);
    border-color: var(--app-border);
}

.e-pager .e-numericitem:not(.e-currentitem):hover {
    background-color: var(--app-hover-bg);
    color: var(--app-text);
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-pager .e-numericitem.e-currentitem.e-focused {
    background: var(--app-pill-active-bg);
    color: var(--app-pill-active-text);
    border-color: var(--app-pill-active-bg);
    box-shadow: none;
}

/* Specificity: report-viewer.css and Syncfusion's own theme both style these buttons via
   ".e-pager div.e-icons.e-pager-default" (and the .e-disable equivalent), so the overrides
   below chain the buttons' own classes to win regardless of stylesheet load order. */

.e-pager .e-icons.e-pager-default.e-firstpage,
.e-pager .e-icons.e-pager-default.e-prevpage,
.e-pager .e-icons.e-pager-default.e-nextpage,
.e-pager .e-icons.e-pager-default.e-lastpage {
    color: var(--app-text);
}

.e-pager .e-icons.e-pager-default.e-firstpage:hover,
.e-pager .e-icons.e-pager-default.e-prevpage:hover,
.e-pager .e-icons.e-pager-default.e-nextpage:hover,
.e-pager .e-icons.e-pager-default.e-lastpage:hover {
    color: var(--app-accent-1);
    background-color: var(--app-hover-bg);
}

.e-pager .e-icons.e-disable.e-firstpagedisabled,
.e-pager .e-icons.e-disable.e-prevpagedisabled,
.e-pager .e-icons.e-disable.e-nextpagedisabled,
.e-pager .e-icons.e-disable.e-lastpagedisabled {
    color: var(--app-muted);
    opacity: .55;
}

.e-pager .e-parentmsgbar,
.e-pager .e-pagerconstant,
.e-pager .e-pagenomsg,
.e-pager .e-pagecountmsg {
    color: var(--app-muted);
    font-size: .75rem;
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--app-nav-active-text);
    --bs-nav-pills-link-active-bg: var(--app-accent-3);
}

.nav-pills .nav-link.active {
    background-image: var(--app-nav-active-bg);
    box-shadow: 0 0 14px var(--app-glow);
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--app-text);
    --bs-accordion-border-color: var(--app-border);
    --bs-accordion-border-radius: var(--app-radius-card);
    --bs-accordion-inner-border-radius: calc(var(--app-radius-card) - 1px);
    --bs-accordion-btn-color: var(--app-text);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: var(--app-focus-ring);
    --bs-accordion-active-color: var(--bs-link-color);
    --bs-accordion-active-bg: var(--app-hover-bg);
}

.alert-light {
    --bs-alert-color: var(--app-text);
    --bs-alert-bg: var(--app-hover-bg);
    --bs-alert-border-color: var(--app-border);
}

.table {
    --bs-table-color: var(--app-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--app-grid-line);
    --bs-table-striped-bg: rgba(var(--app-accent-rgb), .04);
    --bs-table-hover-color: var(--app-text);
    --bs-table-hover-bg: var(--app-hover-bg);
}

.progress {
    --bs-progress-bg: var(--app-track);
    --bs-progress-bar-bg: var(--app-accent-3);
}

/* Cyan badges take dark text: white on cyan is unreadable. */
.badge.bg-primary,
.text-bg-primary {
    --bs-badge-color: var(--app-pill-active-text);
    color: var(--app-pill-active-text) !important;
}

/* Syncfusion ------------------------------------------------------------------------------------------------------- */

/* Grids on pages are the glass surface themselves (no wrapper card): transparent content, tinted header. */
.app-page .e-grid {
    --color-sf-content-bg-color: transparent;
    --color-sf-content-bg-color-alt1: rgba(var(--app-accent-rgb), .06);
    --color-sf-border-light: var(--app-grid-line);
    border-style: solid;
    border-color: var(--app-card-border);
    border-radius: var(--app-radius-card);
    background-color: var(--app-card-bg);
    background-image: var(--app-card-highlight);
    box-shadow: var(--app-card-shadow);
}

.app-page .e-grid .e-gridheader {
    border-top-style: none;
    border-radius: calc(var(--app-radius-card) - 1px) calc(var(--app-radius-card) - 1px) 0 0;
}

.app-page .e-grid .e-gridheader .e-headercell .e-headertext {
    color: var(--app-muted);
    font-weight: 600;
}

.app-page .e-grid .e-gridpager,
.app-page .e-grid .e-pager {
    border-radius: 0 0 calc(var(--app-radius-card) - 1px) calc(var(--app-radius-card) - 1px);
}

/* The app font everywhere Syncfusion sets its own system font stack; icon fonts are left alone. */
.e-control:not(.e-icons),
.e-css:not(.e-icons),
.e-grid,
.e-grid .e-headercell,
.e-grid .e-rowcell,
.e-pager,
.e-btn,
.e-input-group,
.e-float-input,
input.e-input,
textarea.e-input,
.e-dropdownbase .e-list-item,
.e-dropdownbase .e-list-group-item,
.e-listview,
.e-tooltip-wrap .e-tip-content,
.e-checkbox-wrapper .e-label {
    font-family: var(--es-font-family);
}

/* Panels over the map --------------------------------------------------------------------------------------------- */

/* The left panel always has content when shown; the bottom panel's content (the trips player) brings its own
   .app-glass because it hides itself while the panel stays. */
.es-shell-left-float-panel {
    border: 1px solid var(--app-card-border);
    border-radius: var(--app-radius-card);
    background-color: var(--app-map-panel-bg);
    background-image: var(--app-card-highlight);
    box-shadow: var(--app-card-shadow), 0 18px 40px rgba(0, 0, 0, .22);
    color: var(--app-text);
    -webkit-backdrop-filter: var(--app-blur-map);
    backdrop-filter: var(--app-blur-map);
}

/* The panel shell is the glass; cards inside it are flat. */
.es-shell-left-float-panel .card {
    --bs-card-bg: transparent;
    --bs-card-border-color: transparent;
    background-image: none;
    box-shadow: none;
}

.es-shell-left-float-panel .card .card {
    --bs-card-bg: rgba(var(--app-accent-rgb), .04);
    --bs-card-border-color: var(--app-border);
}

/* List and edit pages composed inside a float panel (Geofence, Points of interest) show no page frame. */
.es-shell-left-float-panel .app-page-host {
    padding: 0;
}

.es-shell-left-float-panel .app-page {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* The panel's height comes from its content, so the page body must size to it too (flex-basis 0 would collapse it). */
.es-shell-left-float-panel .app-page--fill {
    height: auto;
}

.es-shell-left-float-panel .app-page-body,
.es-shell-left-float-panel .app-page--fill > .app-page-body {
    flex: 1 1 auto;
    min-height: auto;
    padding: 0;
}

/* Vehicle windows opened from the map. */
.fc-popup-window .card {
    --bs-card-bg: var(--app-map-panel-bg);
    -webkit-backdrop-filter: var(--app-blur-map);
    backdrop-filter: var(--app-blur-map);
}

/* Mapbox popups and controls --------------------------------------------------------------------------------------- */

.mapboxgl-popup-content {
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background: var(--app-popover-bg);
    box-shadow: var(--app-popover-shadow);
    color: var(--app-text);
}

.mapboxgl-popup-close-button {
    color: var(--app-muted);
}

.mapboxgl-ctrl-group {
    border: 1px solid var(--app-card-border);
    border-radius: .625rem;
    background: var(--app-map-panel-bg);
    -webkit-backdrop-filter: var(--app-blur-map);
    backdrop-filter: var(--app-blur-map);
}

.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: var(--app-card-shadow);
}

.mapboxgl-ctrl-group button + button {
    border-top-color: var(--app-grid-line);
}

.mapboxgl-ctrl button:not(:disabled):hover {
    background-color: var(--app-hover-bg);
}

/* Mapbox draws its control icons as dark SVGs. */
[data-bs-theme=dark] .mapboxgl-ctrl-icon {
    filter: invert(1) brightness(.9);
}

/* Accessibility ---------------------------------------------------------------------------------------------------- */

:focus-visible {
    outline-color: var(--app-accent-1);
}

@media (prefers-reduced-transparency: reduce) {
    .app-header,
    .app-side-nav,
    .app-footer,
    .app-card,
    .app-glass,
    .es-shell-left-float-panel,
    .mapboxgl-ctrl-group {
        background-color: var(--app-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .card {
        --bs-card-bg: var(--app-surface);
    }
}