/* Custom styles for Heliguardian branding */

/* Roboto — the active (material skin) body font, self-hosted (latin subset from
   @fontsource/roboto). The Google Fonts @imports were removed from the theme scss;
   no text font is fetched from a CDN any more. Roboto has no 600 weight — semibold
   text resolves to 700 per CSS font-matching. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/roboto-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/roboto-latin-900-normal.woff2") format("woff2"); }

/* Inter — self-hosted (latin subset from @fontsource/inter, copied to css/fonts by
   gulp). Replaces the Google Fonts CDN link so the app has no external font dependency. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* Tabler icon font — authoritative declaration. Loads after vendors.min.css, so this
   @font-face wins and pins the src to the only format we ship (woff2). Keep the version
   query in step with the @tabler/icons-webfont package if it's ever upgraded. */
@font-face {
    font-family: "tabler-icons";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("./fonts/tabler-icons.woff2?v=3.36.1-hg1") format("woff2");
}

/* Full-screen mask shown while impersonation is entered/exited (ImpersonationTransitionOverlay).
   Near-opaque so the auth flip + layout swap underneath never shows through. */
.impersonation-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ins-body-bg, #fff);
    opacity: 0.97;
}

/* WCAG-compliant input borders - match focus/hover state at all times */
.form-control,
.form-select {
    border-color: var(--ins-dark-border-subtle);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ins-dark-border-subtle);
    box-shadow: 0 0 0 0.15rem rgba(102, 88, 221, 0.15);
}

/* Pilot detail tabs - bordered active tab merges into card body */
.pilot-detail-tabs {
    border-bottom: none;
}

.pilot-detail-tabs .nav-link {
    color: var(--ins-secondary-color);
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    margin-bottom: -1px;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
}

.pilot-detail-tabs .nav-link:hover {
    border-color: #adb5bd #adb5bd transparent;
    color: var(--ins-body-color);
}

.pilot-detail-tabs .nav-link.active {
    color: var(--ins-primary);
    font-weight: 600;
    background-color: #fff;
    border-color: #adb5bd #adb5bd #fff;
}

/* Logo base styling - match topbar height */
.logo-heliguardian {
    pointer-events: auto !important;
    cursor: pointer !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
}

/* Logo expanded state (logo-lg) */
.sidenav-menu .logo-heliguardian .logo-lg {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 1.25rem !important;
    gap: 0.625rem !important;
    height: 100% !important;
}

.sidenav-menu .logo-heliguardian .logo-lg i {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
}

.sidenav-menu .logo-heliguardian .logo-lg .logo-text {
    color: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Logo collapsed state (logo-sm) */
.sidenav-menu .logo-heliguardian .logo-sm {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.sidenav-menu .logo-heliguardian .logo-sm i {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
}

/* Condensed/minimized sidebar state */
html[data-sidenav-size="condensed"] .sidenav-menu .logo-heliguardian .logo-lg {
    display: none !important;
}

html[data-sidenav-size="condensed"] .sidenav-menu .logo-heliguardian .logo-sm {
    display: flex !important;
}

/* Ensure click area works in condensed mode */
html[data-sidenav-size="condensed"] .sidenav-menu .logo-heliguardian {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hover state for condensed sidebar */
html[data-sidenav-size="condensed"] .sidenav-menu:hover .logo-heliguardian .logo-lg {
    display: flex !important;
}

html[data-sidenav-size="condensed"] .sidenav-menu:hover .logo-heliguardian .logo-sm {
    display: none !important;
}

/* Icon view mode */
html[data-sidenav-view="icon-view"] .sidenav-menu .logo-heliguardian .logo-lg {
    display: none !important;
}

html[data-sidenav-view="icon-view"] .sidenav-menu .logo-heliguardian .logo-sm {
    display: flex !important;
}

/* Compact mode */
html[data-sidenav-size="compact"] .sidenav-menu .logo-heliguardian .logo-lg {
    display: none !important;
}

html[data-sidenav-size="compact"] .sidenav-menu .logo-heliguardian .logo-sm {
    display: flex !important;
}

/* Equal height role cards */
.row {
    display: flex;
    flex-wrap: wrap;
}

.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.row > [class*='col-'] > .card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.row > [class*='col-'] > .card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Onboarding Stepper Styles */
.onboarding-stepper {
    padding: 2rem 3rem;
    border-bottom: 1px solid var(--ins-border-color);
    margin: -1rem -1rem 1.5rem -1rem;
    background-color: var(--ins-card-bg);
}

.stepper-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
    gap: 0;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 140px;
    padding: 0 0.5rem;
}

.stepper-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #fff;
    border: 2px solid var(--ins-border-color);
    color: var(--ins-secondary-color);
    z-index: 1;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stepper-item.completed .stepper-icon {
    background-color: var(--ins-success);
    border-color: var(--ins-success);
    color: #fff;
}

.stepper-item.active .stepper-icon {
    background-color: var(--ins-primary);
    border-color: var(--ins-primary);
    color: #fff;
}

.stepper-icon i {
    font-size: 0.875rem;
    line-height: 1;
}

.stepper-label {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ins-secondary-color);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 0 0.5rem;
}

.stepper-item.completed .stepper-label {
    color: var(--ins-success);
}

.stepper-item.active .stepper-label {
    color: var(--ins-primary);
    font-weight: 600;
}

.stepper-line {
    position: absolute;
    top: 13px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background-color: var(--ins-border-color);
    z-index: 0;
}

.stepper-item:last-child .stepper-line {
    display: none;
}

.stepper-line.completed {
    background-color: var(--ins-success);
}

/* Full-width nav tabs for organisation detail */
.nav-tabs-fullwidth {
    display: flex;
    border-bottom: 1px solid var(--ins-border-color);
}

.nav-tabs-fullwidth .nav-item {
    flex: 1;
    text-align: center;
}

.nav-tabs-fullwidth .nav-link {
    width: 100%;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.75rem 1rem;
    color: var(--ins-secondary-color);
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-tabs-fullwidth .nav-link:hover {
    border-color: transparent;
    border-bottom-color: var(--ins-border-color);
    color: var(--ins-body-color);
}

.nav-tabs-fullwidth .nav-link.active {
    border-color: transparent;
    border-bottom-color: var(--ins-primary);
    color: var(--ins-primary);
    background-color: transparent;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .onboarding-stepper {
        padding: 1rem;
    }

    .stepper-label {
        font-size: 0.625rem;
    }

    .stepper-icon {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }

    .stepper-icon i {
        font-size: 0.75rem;
    }

    .stepper-line {
        top: 11px;
        left: calc(50% + 16px);
        right: calc(-50% + 16px);
    }

    .nav-tabs-fullwidth .nav-link {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }
}

/* Seat Management Styles */
.seat-bundle-card {
    padding: 1rem;
    border: 2px solid var(--ins-border-color);
    border-radius: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.seat-bundle-card:hover {
    border-color: var(--ins-secondary-color);
}

.seat-bundle-card.selected {
    border-color: var(--ins-primary);
    background-color: rgba(var(--ins-primary-rgb), 0.05);
    box-shadow: 0 0 0 4px rgba(var(--ins-primary-rgb), 0.1);
}

.seat-bundle-card .bundle-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
    margin-bottom: 0.25rem;
}

.seat-bundle-card.selected .bundle-label {
    color: var(--ins-primary);
}

.seat-bundle-card .bundle-count {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ins-body-color);
}

.seat-bundle-card .bundle-discount {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--ins-success);
    background-color: rgba(var(--ins-success-rgb), 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-top: 0.375rem;
    min-height: 1.25rem;
}

.seat-bundle-card .bundle-discount-placeholder {
    min-height: 1.25rem;
    margin-top: 0.375rem;
}

.seat-action-card {
    transition: all 0.2s ease;
}

.seat-action-card:hover {
    border-color: var(--ins-primary) !important;
}

.seat-action-card:hover .text-muted {
    color: var(--ins-primary) !important;
}

.fw-black {
    font-weight: 900;
}

/* Progress bar styling for seats */
.progress {
    border-radius: 0.5rem;
    background-color: var(--ins-light);
}

.progress-bar {
    border-radius: 0.5rem;
    transition: width 0.5s ease;
}

/* Cursor pointer utility */
.cursor-pointer {
    cursor: pointer;
}

/* Base operations table styling - hover uses old selected colour, selected uses old hover colour */
.table-hover tbody tr.cursor-pointer:hover {
    --ins-table-bg-state: #e0def8;
    --ins-table-color-state: #313a46;
}

/* Selected row styling - use the lighter primary colour (old hover) */
.table-hover tbody tr.table-primary,
.table-hover tbody tr.table-primary > td {
    --ins-table-color: #313a46;
    --ins-table-bg: rgba(var(--ins-primary-rgb), 0.08);
    --ins-table-border-color: rgba(var(--ins-primary-rgb), 0.12);
    background-color: rgba(var(--ins-primary-rgb), 0.08) !important;
}

/* Map placeholder styling */
#basesMap {
    background-color: #e9ecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dee2e6' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Avatar sizes */
.avatar-sm {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.avatar-md {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* Base operations action buttons */
.table .btn-light {
    background-color: transparent;
    border: none;
}

.table .btn-light:hover {
    background-color: rgba(var(--ins-primary-rgb), 0.1);
    color: var(--ins-primary);
}

/* Breathing room above the first item in the side navigation */
.side-nav > li:first-child {
    margin-top: 0.5rem;
}

/* Avatar Group Item Styles for Roles Page */
.avatar-group {
    display: flex;
    padding-left: 0.5rem;
}

.avatar-group .avatar-group-item {
    margin-left: -0.5rem;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.avatar-group .avatar-group-item:first-child {
    margin-left: 0;
}

.avatar-group .avatar-group-item:hover {
    z-index: 10;
    transform: translateY(-2px);
}

.avatar-group .avatar-group-item img,
.avatar-group .avatar-group-item .avatar-sm {
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.avatar-group .avatar-group-item .avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.avatar-group .avatar-group-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
}

/* Role card styling */
.card.opacity-75 {
    opacity: 0.75;
}

/* Form switch styling for role toggle */
.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--ins-success);
    border-color: var(--ins-success);
}

/* Role Detail Page - consistent card styling */
.role-detail-card {
    background-color: #ffffff;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Consistent app table header styling - dark topbar background */
.app-table thead {
    background: var(--ins-topbar-bg) !important;
}

.app-table thead th {
    color: var(--ins-topbar-item-color) !important;
    font-weight: 600;
    border-bottom: none !important;
}

/* Role card icon circle styling */
.avatar-md.rounded-circle.border {
    border-color: #e9ecef !important;
    background-color: #ffffff;
}

/* Role card avatar group adjustments */
.card .avatar-group {
    padding-left: 0;
}

.card .avatar-group .avatar-group-item {
    margin-left: -8px;
}

.card .avatar-group .avatar-group-item:first-child {
    margin-left: 0;
}

/* Sortable column headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sort-icons {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    line-height: 1;
}

/* Site Detail Page Styles */
.site-detail-header {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.site-weather-widget {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    text-align: center;
}

.site-weather-widget .weather-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ins-secondary-color);
}

.site-weather-widget .weather-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ins-heading-color);
    margin-top: 0.125rem;
}

.site-detail-tabs {
    border-bottom: none;
}

.site-detail-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ins-secondary-color);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: all 0.15s ease;
}

.site-detail-tabs .nav-link:hover {
    color: var(--ins-body-color);
    border-bottom-color: var(--ins-border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.site-detail-tabs .nav-link.active {
    color: var(--ins-primary);
    border-bottom-color: var(--ins-primary);
    background-color: transparent;
}

.letter-spacing {
    letter-spacing: 0.5px;
}

/* Text-indigo utility for weather widget */
.text-indigo {
    color: #6610f2 !important;
}

/* Site detail map placeholder */
#siteDetailMap {
    background-color: #e9ecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dee2e6' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Flight tracking map */
#flightTrackingMap {
    background-color: #e9ecef;
}

.flight-plane-icon {
    background: none !important;
    border: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}


/* KPI summary cards – clickable filter states */
.kpi-card {
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    border: 2px solid transparent;
}

.kpi-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.kpi-card.kpi-active-open {
    border-color: var(--bs-danger) !important;
    background-color: rgba(var(--bs-danger-rgb), .08) !important;
    box-shadow: 0 .25rem 1rem rgba(var(--bs-danger-rgb), .2);
}

.kpi-card.kpi-active-critical {
    border-color: var(--bs-warning) !important;
    background-color: rgba(var(--bs-warning-rgb), .08) !important;
    box-shadow: 0 .25rem 1rem rgba(var(--bs-warning-rgb), .2);
}

.kpi-card.kpi-active-pending {
    border-color: var(--bs-info) !important;
    background-color: rgba(var(--bs-info-rgb), .08) !important;
    box-shadow: 0 .25rem 1rem rgba(var(--bs-info-rgb), .2);
}

.kpi-card.kpi-active-scheduled {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), .08) !important;
    box-shadow: 0 .25rem 1rem rgba(var(--bs-primary-rgb), .2);
}

/* Sites map placeholder */
#sitesMap {
    background-color: #e9ecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dee2e6' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Shared table-loading spinner (Users-page format: icon chip + title + subtitle) ── */
.hg-spin {
    display: inline-block;
    animation: hg-spin 0.8s linear infinite;
}

@keyframes hg-spin {
    to { transform: rotate(360deg); }
}