/* -------------------------------------------------------------------------- */
/*                  Kronor brand: typography (kronor.io uses Inter)           */
/* -------------------------------------------------------------------------- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

:root {
    --falcon-gutter-x: 2rem;
}

/* -------------------------------------------------------------------------- */
/*   Kronor brand: dark mode. The brand green (#0c6535) reads fine on white   */
/*   but is too dark for text on the dark background, so accents that render  */
/*   as text or icons switch to the lighter brand green (#5b8c5a).            */
/* -------------------------------------------------------------------------- */

.dark {
    --falcon-primary: #5b8c5a;
    --falcon-primary-rgb: 91, 140, 90;
    --falcon-link-color: #5b8c5a;
    --falcon-link-hover-color: #7aa879;
    --falcon-btn-link-color: #5b8c5a;
    --falcon-navbar-vertical-link-active-color: #5b8c5a;
    --falcon-navbar-light-brand-color: #5b8c5a;
    --falcon-navbar-dark-brand-color: #5b8c5a;
}

/* the theme compiles these with a literal primary hex, so vars don't reach them */
.dark a:not([class]) {
    color: var(--falcon-link-color);
}

.dark a:not([class]):hover {
    color: var(--falcon-link-hover-color);
}

.dark .btn-link {
    color: var(--falcon-btn-link-color);
}

/* -------------------------------------------------------------------------- */
/*   Kronor brand: vibrant sidebar. Deep green rail with cream type, echoing  */
/*   the logo card and the login panel. The theme's vibrant variant ships a   */
/*   missing bg image and white text — replace with brand green + cream.      */
/* -------------------------------------------------------------------------- */

/* same sweep as the login panel, so app and auth read as one surface.
   The gradient covers the whole fixed sidebar column (brand + toggle +
   menu) so the header and the rail read as one green block. Desktop
   only: on mobile the vertical navbar is replaced by the offcanvas. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-vibrant {
        background-image: linear-gradient(180deg, #2e8f5b, #0a5c30 65%);
        border-radius: 0.375rem;
    }
}

/* the collapse carries a navy glass background-color that the stock vibrant
   gradient image used to hide; the gradient lives on the nav, which resizes
   with every state (expanded, collapsed rail, collapsed-hover flyout), so the
   collapse stays fully transparent */
@media (min-width: 992px) {
    .navbar-vertical.navbar-vibrant .navbar-collapse {
        background-color: transparent;
        background-image: none;
    }

}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link {
    color: #f2eece;
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.dropdown-indicator:after {
    border-color: #f2eece;
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:hover,
.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:focus,
.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.active {
    color: #fff;
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:hover.dropdown-indicator:after,
.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:focus.dropdown-indicator:after {
    border-color: #fff;
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.active {
    background-color: rgba(242, 238, 206, 0.12);
    border-radius: 0.375rem;
}

.navbar-vertical.navbar-vibrant .navbar-vertical-divider {
    background-color: rgba(242, 238, 206, 0.2);
}

/* align the hamburger's right edge with the menu chevrons (the theme's
   4-class rule pushes it 1.5rem left) */
.navbar-vertical.navbar-expand-lg.navbar-vibrant .toggle-icon-wrapper {
    margin-right: -0.1875rem;
}

/* collapsed rail: the hamburger joins the icon column on the left
   (!important to out-cascade the ms-auto utility) */
.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-lg.navbar-vibrant .toggle-icon-wrapper {
    margin-left: -0.75rem !important;
}

/* the collapse toggle sits inside the green rail: cream lines, cream hover */
.navbar-vibrant .navbar-toggle-icon .toggle-line,
.navbar-vibrant .navbar-toggle-icon:after,
.navbar-vibrant .navbar-toggle-icon:before {
    background-color: #f2eece;
}

.navbar-vibrant .navbar-toggler-humburger-icon:hover,
.navbar-vibrant .navbar-toggler-humburger-icon:focus {
    background-color: rgba(242, 238, 206, 0.15);
}

/* The wordmark does not fit the collapsed sidebar rail, but the hover
   flyout is full-width and should show it again */
.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical .navbar-brand {
    display: none;
}

/* Theme-dependent asset swap (the theme toggle flips the class client-side,
   so a server-side cookie swap would go stale until reload) */
.dark .d-dark-none {
    display: none !important;
}

html:not(.dark) .d-light-none {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/*   Kronor brand: DTV smart table (PrimeReact island). Its theme ships       */
/*   compiled indigo (#6366f1) from the declarative-table-view repo; until    */
/*   that repo is rethemed, bridge the primary color here. These rules are    */
/*   unlayered so they win over the @layer primereact rules.                  */
/* -------------------------------------------------------------------------- */

:root {
    --primary-color: var(--falcon-primary);
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-secondary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning) {
    background: var(--falcon-primary);
    border-color: var(--falcon-primary);
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-secondary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning):enabled:hover {
    background: #0a542c;
    border-color: #0a542c;
}

.p-button.p-button-outlined:not(.p-button-secondary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning),
.p-button.p-button-text:not(.p-button-secondary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning) {
    color: var(--falcon-primary);
    border-color: var(--falcon-primary);
}

.p-checkbox.p-highlight .p-checkbox-box,
.p-radiobutton.p-highlight .p-radiobutton-box,
.p-inputswitch.p-highlight .p-inputswitch-slider,
.p-togglebutton.p-highlight {
    background: var(--falcon-primary);
    border-color: var(--falcon-primary);
}

.p-datatable .p-sortable-column.p-highlight,
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon,
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    color: var(--falcon-primary);
}

.p-inputtext:enabled:focus,
.p-multiselect:not(.p-disabled).p-focus,
.p-dropdown:not(.p-disabled).p-focus {
    border-color: var(--falcon-primary);
}

.p-tag:not(.p-tag-success):not(.p-tag-danger):not(.p-tag-warning):not(.p-tag-info) {
    color: var(--falcon-primary);
    border-color: var(--falcon-primary);
}

/* DTV typography: PrimeReact defaults to 16px, which reads oversized next to
   the portal's denser chrome */
.p-component {
    font-size: 0.875rem;
}

/* PrimeReact icon-only buttons default to 3rem — chunky next to our inputs */
.p-button.p-button-icon-only {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

/* buttons attached to an input/button group stretch to the group's height */
.p-calendar .p-datepicker-trigger.p-button-icon-only,
.p-inputgroup .p-button.p-button-icon-only,
.p-splitbutton .p-splitbutton-menubutton.p-button-icon-only {
    height: auto;
    align-self: stretch;
    width: 2.5rem;
}

/* rounded per-field reset buttons: small enough for their 20px label row
   (36px overflowed onto the input below) and spaced off the label */
.p-button.p-button-rounded.p-button-icon-only {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.375rem;
}

.p-button.p-button-rounded.p-button-icon-only .p-button-icon {
    font-size: 0.75rem;
}

/* grouped filter inputs (date range): the border bar and inputs align with
   the field label instead of being indented past it */
.tw\:border-l-2.tw\:ml-2 {
    margin-left: 0;
}

/* status tags in table cells: smaller type so the pills keep one line */
.p-datatable .p-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

/* the smart-table toolbar: sage tint instead of neutral gray, to sit with the
   green sidebar */
.p-menubar {
    background: #eef4ef;
    border-color: #dbe7de;
}

/* DTV sets the filter-chip indigo as an inline style; match that exact value
   so dynamically colored tags are left alone (border is currentColor) */
.p-tag[style*="99, 102, 241"] {
    color: var(--falcon-primary) !important;
}

/* ---- DTV dark mode: the island ships light-only, so bridge it here ---- */

.dark .p-menubar {
    background: rgba(91, 140, 90, 0.08);
    border-color: #374151;
}

.dark .p-datatable .p-datatable-thead > tr > th {
    background: #1f2a37;
    color: #d1d5db;
    border-color: #374151;
}

.dark .p-datatable .p-datatable-tbody > tr {
    background: #121e2d;
    color: #9ca3af;
}

.dark .p-datatable .p-datatable-tbody > tr > td {
    border-color: #374151;
}

.dark .p-datatable .p-datatable-tbody > tr:nth-child(even) {
    background: #16222f;
}

.dark .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
    background: rgba(91, 140, 90, 0.12);
    color: #d1d5db;
}

.dark .p-paginator {
    background: transparent;
    color: #9ca3af;
    border-color: #374151;
}

.dark .p-paginator .p-paginator-pages .p-paginator-page,
.dark .p-paginator .p-paginator-first,
.dark .p-paginator .p-paginator-prev,
.dark .p-paginator .p-paginator-next,
.dark .p-paginator .p-paginator-last {
    color: #9ca3af;
}

.dark .p-inputtext,
.dark .p-dropdown,
.dark .p-multiselect,
.dark .p-inputnumber-input {
    background: #0b1727;
    border-color: #374151;
    color: #d1d5db;
}

.dark .p-inputtext::placeholder {
    color: #6b7280;
}

.dark .p-dropdown .p-dropdown-label,
.dark .p-multiselect .p-multiselect-label {
    color: #d1d5db;
}

.dark .p-dropdown-panel,
.dark .p-multiselect-panel,
.dark .p-datepicker,
.dark .p-menu,
.dark .p-tieredmenu,
.dark .p-dialog,
.dark .p-dialog .p-dialog-header,
.dark .p-dialog .p-dialog-content,
.dark .p-dialog .p-dialog-footer {
    background: #1f2a37;
    color: #d1d5db;
    border-color: #374151;
}

.dark .p-dropdown-panel .p-dropdown-item,
.dark .p-multiselect-panel .p-multiselect-item,
.dark .p-menu .p-menuitem-link,
.dark .p-menu .p-menuitem-text,
.dark .p-datepicker table td > span,
.dark .p-datepicker .p-datepicker-header {
    color: #d1d5db;
}

.dark .p-dropdown-panel .p-dropdown-item:not(.p-disabled):hover,
.dark .p-multiselect-panel .p-multiselect-item:not(.p-disabled):hover,
.dark .p-menu .p-menuitem-link:hover,
.dark .p-datepicker table td > span:not(.p-disabled):hover {
    background: rgba(91, 140, 90, 0.15);
    color: #f3f4f6;
}

.dark .p-datepicker .p-datepicker-header {
    background: #1f2a37;
    border-color: #374151;
}

.dark .p-checkbox .p-checkbox-box:not(.p-highlight),
.dark .p-radiobutton .p-radiobutton-box:not(.p-highlight) {
    background: #0b1727;
    border-color: #374151;
}

.dark .p-accordion .p-accordion-header .p-accordion-header-link,
.dark .p-accordion .p-accordion-content {
    background: transparent;
    color: #d1d5db;
    border-color: #374151;
}

.dark .p-panel .p-panel-header {
    background: #1f2a37;
    color: #d1d5db;
    border-color: #374151;
}

.dark .p-panel .p-panel-header .p-panel-title,
.dark .p-panel .p-panel-header .p-panel-header-icon {
    color: #d1d5db;
}

.dark .p-panel .p-panel-content {
    background: transparent;
    color: #d1d5db;
    border-color: #374151;
}

.dark .p-multiselect-panel .p-multiselect-header,
.dark .p-dropdown-panel .p-dropdown-header {
    background: #1f2a37;
    color: #d1d5db;
    border-color: #374151;
}

.dark .p-multiselect-panel .p-multiselect-header .p-multiselect-close,
.dark .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
    color: #9ca3af;
}

.dark .p-multiselect-items-wrapper,
.dark .p-dropdown-items-wrapper {
    background: #1f2a37;
    scrollbar-color: #4b5563 #1f2a37;
}

.dark .p-multiselect-items-wrapper::-webkit-scrollbar-track,
.dark .p-dropdown-items-wrapper::-webkit-scrollbar-track {
    background: #1f2a37;
}

.dark .p-multiselect-items-wrapper::-webkit-scrollbar-thumb,
.dark .p-dropdown-items-wrapper::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.dark .p-button.p-button-outlined:not(.p-button-secondary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning),
.dark .p-button.p-button-text:not(.p-button-secondary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning),
.dark .p-datatable .p-sortable-column.p-highlight,
.dark .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon,
.dark .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    color: var(--falcon-primary);
}

/* -------------------------------------------------------------------------- */
/*   Kronor brand: ALL card headers share the sage gradient + dot motif       */
/*   (the !important also overrides the bg-light utility where present)       */
/* -------------------------------------------------------------------------- */

.card-header {
    position: relative;
    z-index: 0;
    background-color: #f6f9f6 !important;
    background-image: linear-gradient(90deg, #e5efe6, rgba(246, 249, 246, 0));
}

/* the kronor.io dot decoration (10px grid of ~1.5px dots) in the right corner */
.card-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 9rem;
    pointer-events: none;
    border-radius: inherit;
    background-image: radial-gradient(circle, rgba(12, 101, 53, 0.3) 1.5px, transparent 1.9px);
    background-size: 11px 11px;
    background-position: right 1rem center;
    -webkit-mask-image: linear-gradient(to left, #000 40%, transparent);
    mask-image: linear-gradient(to left, #000 40%, transparent);
}

.dark .card-header {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, rgba(91, 140, 90, 0.18), rgba(91, 140, 90, 0.03));
}

.dark .card-header::after {
    background-image: radial-gradient(circle, rgba(91, 140, 90, 0.35) 1.5px, transparent 1.9px);
}

/* -------------------------------------------------------------------------- */
/*   Kronor brand: Falcon "default" buttons restyled to the same outlined-    */
/*   green language as the smart-table toolbar, instead of white + shadow     */
/* -------------------------------------------------------------------------- */

.btn-falcon-default {
    color: var(--falcon-primary);
    background-color: transparent;
    border: 1px solid var(--falcon-primary);
    box-shadow: none;
}

.btn-falcon-default:hover {
    color: var(--falcon-primary);
    background-color: rgba(12, 101, 53, 0.06);
    border-color: var(--falcon-primary);
    box-shadow: none;
}

.btn-falcon-default:focus,
.btn-falcon-default:focus-visible {
    color: var(--falcon-primary);
    background-color: rgba(12, 101, 53, 0.06);
    border-color: var(--falcon-primary);
    box-shadow: 0 0 0 0.2rem rgba(12, 101, 53, 0.15);
}

.btn-falcon-default:active,
.btn-falcon-default.active {
    color: var(--falcon-primary);
    background-color: #cfe1d7;
    border-color: var(--falcon-primary);
}

.btn-falcon-default:disabled,
.btn-falcon-default.disabled {
    color: #9ca3af;
    background-color: transparent;
    border-color: #d1d5db;
    box-shadow: none;
}

.dark .btn-falcon-default:hover,
.dark .btn-falcon-default:focus,
.dark .btn-falcon-default:focus-visible {
    background-color: rgba(91, 140, 90, 0.12);
}

.dark .btn-falcon-default:active,
.dark .btn-falcon-default.active {
    background-color: rgba(91, 140, 90, 0.25);
}

/* detail pages: the side rail (customer/device/actions) stays visible while
   the main column scrolls; scrolls internally if taller than the viewport */
@media (min-width: 992px) {
    .detail-side-rail {
        position: sticky;
        top: 4.6rem;
        max-height: calc(100vh - 5.6rem);
        overflow-y: auto;
        align-self: flex-start;
    }

    .detail-side-rail:has(.modal.show) {
        position: static;
        overflow: visible;
        max-height: none;
    }
}

/* wide tables scroll inside their card; keep the last column's content clear
   of the clipped edge */
.table-responsive .table td:last-child,
.table-responsive .table th:last-child {
    padding-right: 1rem;
}

/* create a separate stacking context for the page */
/* main#top {
    position: relative;
    z-index: 0;
} */

h5 {
    font-weight: 600;
}

.card-header,
.card-body {
    padding: 1rem;
}

.card:has(.dropdown-menu.show) {
    z-index: 2;
}

/* Mirror all theme.min.css "+.content" rules with "~" for when offcanvas sits between nav and .content */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg ~ .content {
        margin-left: 15.625rem;
    }

    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top {
        position: sticky;
        top: 0;
    }

    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top .navbar-toggler {
        display: none;
    }

    /* vibrant collapsed rail is 4.125rem wide; leave a visible gap to the content */
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg ~ .content {
        margin-left: 5.125rem;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg ~ .content .navbar-top {
        padding-left: 13.5rem;
    }
}

.table {
    color: var(--falcon-body-color);
}

.table .table-striped {
    color: var(--falcon-body-color);
}

.table-striped>tbody>tr:nth-of-type(2n)>* {
    color: var(--falcon-body-color);
}

/* -------------------------------------------------------------------------- */
/*                          Responsive / Mobile Fixes                         */
/* -------------------------------------------------------------------------- */

/* Mobile nav toggle button in top bar */
.mobile-nav-toggle {
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--falcon-navbar-light-color, #637381);
}

/* Offcanvas mobile navigation drawer: same brand surface as the desktop rail */
#mobileNavDrawer {
    max-width: 16rem;
    background-image: linear-gradient(180deg, #2e8f5b, #0a5c30 65%);
}

#mobileNavDrawer .offcanvas-header {
    border-bottom-color: rgba(242, 238, 206, 0.2) !important;
}

#mobileNavDrawer .mobile-nav-list {
    padding: 0.5rem 0;
}

#mobileNavDrawer .mobile-nav-list .nav-link {
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    color: #f2eece;
    font-size: 0.875rem;
}

#mobileNavDrawer .mobile-nav-list .nav-link:hover {
    color: #fff;
    background-color: rgba(242, 238, 206, 0.12);
}

#mobileNavDrawer .mobile-nav-list .nav-link-icon {
    width: 1.5rem;
    min-width: 1.5rem;
    display: inline-flex;
    font-size: 0.875rem;
}

#mobileNavDrawer .mobile-nav-list .nav-link-text {
    font-size: 0.875rem;
}

#mobileNavDrawer .mobile-nav-list .nav.collapse {
    flex-direction: column;
}

#mobileNavDrawer .mobile-nav-list .nav .nav-link {
    padding-left: 2.5rem;
}

/* ---- Small-screen layout fixes (below lg / 992px) ---- */
@media (max-width: 991.98px) {
    /* Remove container gutter and content padding on mobile for edge-to-edge layout */
    :root {
        --falcon-gutter-x: 0;
    }

    .content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Prevent long text (UUIDs, fingerprints) from overflowing tables */
    .table td {
        word-break: break-all;
    }

    /* Remove left margin on content that desktop sidebar creates */
    .navbar-vertical.navbar-expand-lg + .content,
    .navbar-vertical.navbar-expand-lg ~ .content {
        margin-left: 0 !important;
    }

    /* Top navbar: keep it non-sticky so it scrolls with the page */
    .navbar-vertical.navbar-expand-lg + .content .navbar-top,
    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top {
        position: relative;
    }

    /* Ensure the main container does not overflow */
    .container-fluid,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Cards should not overflow their container */
    .card-body {
        overflow-x: auto;
    }

    /* DTV Smart Table: contain toolbar within card */
    .p-menubar.p-component {
        flex-wrap: wrap !important;
        overflow: hidden;
    }

    .p-menubar .p-menubar-start,
    .p-menubar .p-menubar-end {
        flex-wrap: wrap !important;
        max-width: 100%;
    }

    .p-menubar .p-menubar-start > div,
    .p-menubar .p-menubar-end > div {
        flex-wrap: wrap !important;
    }

    /* DTV table container: allow horizontal scroll */
    .p-datatable-table-container {
        overflow-x: auto;
    }

    /* Tab content padding reduction on mobile */
    .tab-content {
        padding: 0.5rem !important;
    }
}

/* ---- Very small screens (phones, below 576px) ---- */
@media (max-width: 575.98px) {
    .card-body {
        padding: 0.75rem;
    }

    /* Chart titles */
    .card-title {
        font-size: 0.9rem;
    }
}