/* -------------------------------------------------------------------------- */
/*                  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: status badge palette. The stock Falcon mint success        */
/*   clashes with the sage brand primary; success wears the brand green       */
/*   family instead, the default/in-progress pill returns to blue, and        */
/*   warning/danger/info are derived in the same muted register.              */
/* -------------------------------------------------------------------------- */

:root {
    --falcon-badge-soft-primary-background-color: #d3e3f9;
    --falcon-badge-soft-primary-color: #25477a;
    --falcon-badge-soft-success-background-color: #cee9d5;
    --falcon-badge-soft-success-color: #1b5430;
    --falcon-badge-soft-warning-background-color: #f9e1c0;
    --falcon-badge-soft-warning-color: #724900;
    --falcon-badge-soft-danger-background-color: #f8d8da;
    --falcon-badge-soft-danger-color: #841f32;
    --falcon-badge-soft-info-background-color: #c4eae9;
    --falcon-badge-soft-info-color: #005556;
}

.dark {
    --falcon-badge-soft-primary-background-color: #1e2e47;
    --falcon-badge-soft-primary-color: #9ab9e8;
    --falcon-badge-soft-success-background-color: #1b3423;
    --falcon-badge-soft-success-color: #8ec89d;
    --falcon-badge-soft-warning-background-color: #3b2a12;
    --falcon-badge-soft-warning-color: #deb67f;
    --falcon-badge-soft-danger-background-color: #452125;
    --falcon-badge-soft-danger-color: #eba0a5;
    --falcon-badge-soft-info-background-color: #0a3535;
    --falcon-badge-soft-info-color: #76c8c7;
}

/* -------------------------------------------------------------------------- */
/*   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-image: linear-gradient(90deg, rgba(242, 238, 206, 0.28) 0%, rgba(242, 238, 206, 0.28) 40%, rgba(242, 238, 206, 0) 100%);
    border-radius: 0.375rem;
}

/* Top-level rows have no side padding, so the highlight would start right at
   the icon. Pad the left and pull the row out by the same amount: the icon
   stays put and the highlight gets room around it. The list clips overflow,
   so it is widened the same way, or the pulled-out part is cut off. */
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-vibrant #navbarVerticalNav,
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-vibrant #navbarVerticalNav > .nav-item > .nav-link {
    padding-left: 0.75rem;
    margin-left: -0.75rem;
}

/* Sub-links are indented by padding, so their highlight would start well
   before the text. Move the row in and shorten the padding by the same
   amount: the text stays put and the highlight starts as close to it as the
   top-level one does to its icon. */
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-vibrant #navbarVerticalNav .nav.collapse .nav-link {
    padding-left: 0.75rem;
    margin-left: 0.75rem;
}

/* Group toggle whose sub-menu holds the current page: brightened without the
   background, so it reads apart from the page itself and still shows when
   the rail is collapsed to icons. */
.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.has-active-child {
    color: #fff;
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.has-active-child.dropdown-indicator:after {
    border-color: #fff;
}

.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;
}

/* A section label collapses to just its divider, which reads as a ragged
   left-aligned dash in the narrow rail. Hide the whole label row while
   collapsed; the hover flyout is full-width, so it shows the titles again. */
.navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical .navbar-vertical-label-wrapper {
    display: none;
}

/* At desktop widths the fluid container's side padding insets the whole
   layout, so the green rail floats a gutter off the screen edge. Pull the
   rail flush left; the content keeps its own inner padding, and the
   container's right padding still holds content off the right edge. */
@media (min-width: 992px) {
    .container-fluid[data-layout="fluid"] {
        padding-left: 0;
    }
}

/* 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);
}

/* payment detail: customer, device and actions cards side by side above the
   full-width timeline, sharing the row whichever of them are present and
   wrapping as the page narrows */
.detail-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0 1rem;
    align-items: start;
}

/* 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.active {
    color: #fff;
    background-image: linear-gradient(90deg, rgba(242, 238, 206, 0.28) 0%, rgba(242, 238, 206, 0.28) 40%, rgba(242, 238, 206, 0) 100%);
}
#mobileNavDrawer .mobile-nav-list .nav-link.has-active-child {
    color: #fff;
}

#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;
}

/* DTV Smart Table toolbar: wrap onto another row when the card is too
   narrow, at every width. With the desktop sidebar the card is narrow until
   about 1230px, and a one-row toolbar spilled out of it. Buttons keep their
   label width, so a crowded row wraps instead of cutting labels off. */
.p-menubar.p-component,
.p-menubar .p-menubar-start,
.p-menubar .p-menubar-end,
.p-menubar .p-menubar-start > div,
.p-menubar .p-menubar-end > div {
    flex-wrap: wrap !important;
}

.p-menubar .p-menubar-start,
.p-menubar .p-menubar-end {
    max-width: 100%;
}

.p-menubar .p-button {
    flex-shrink: 0;
}

/* The end group (search, AI assistant) sits right on a shared row and starts
   at the left once it wraps onto its own; PrimeReact's margin-left: auto kept
   it right, leaving a gap before it. */
.p-menubar.p-component {
    justify-content: space-between;
}

.p-menubar .p-menubar-end {
    margin-left: 0;
}

/* ---- 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 {
        overflow: hidden;
    }

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

    /* Tab content padding reduction on mobile, for tabs padded with p-3 */
    .tab-content.p-3,
    .tab-pane.p-3 {
        padding: 0.5rem !important;
    }

    /* Wide tables (payment detail: captures, refunds, webhooks): one block
       per row with "label: value" lines instead of a dozen squeezed
       columns. Labels and empty-cell marks come from paginateJS. Below
       992px they do not fit as tables, and the break-all rule above would
       split every word. */
    .table-stack thead {
        display: none;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--falcon-border-color);
    }

    .table-stack tr[hidden],
    .table-stack td.cell-empty {
        display: none !important;
    }

    /* The label floats left and the cell's content, however many elements
       it is made of, stays right-aligned beside it. */
    .table-stack td {
        display: flow-root;
        /* the theme's white-space-nowrap cells are 1px wide */
        width: 100% !important;
        padding: 0.2rem 0 !important;
        border: 0;
        text-align: right;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /* block wrappers (status badges, action forms) would start a new
       left-aligned line; keep them on the value's right-aligned line */
    .table-stack td > div,
    .table-stack td > form {
        display: inline-block;
    }

    .table-stack td > .d-flex {
        display: inline-flex !important;
    }

    .table-stack td::before {
        content: attr(data-label);
        float: left;
        margin-right: 1rem;
        font-weight: 600;
        text-align: left;
        color: var(--falcon-gray-700);
    }
}

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

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

/* -------------------------------------------------------------------------- */
/*   Hit targets. Apple's HIG asks for 44pt; for a pointer UI we hold the      */
/*   floor at 28px so small controls stay comfortably clickable.               */
/* -------------------------------------------------------------------------- */

/* the topbar Dark Mode switch ships at 27x13px */
.navbar-top .form-switch .form-check-input {
    width: 2.75rem;
    height: 1.5rem;
    background-size: 1.125rem;
    background-position: left center;
}

.navbar-top .form-switch .form-check-input:checked {
    background-position: right center;
}

/* label and switch together form one row tall enough to hit */
.navbar-top .form-check.form-switch {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
}

.navbar-top .form-check.form-switch label {
    line-height: 1.75rem;
    padding: 0 0.25rem;
    cursor: pointer;
}

/* icon-only clipboard/copy buttons carry no padding of their own */
.btn.btn-sm.p-0 {
    min-width: 1.75rem;
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* a value's icon buttons: their hit area is spacing enough */
.value-with-actions > .btn.btn-sm.p-0 {
    margin-left: 0 !important;
}

/* -------------------------------------------------------------------------- */
/*   Sidebar section labels. The rail is cream on green, so the theme's grey   */
/*   label colour disappears against it.                                       */
/* -------------------------------------------------------------------------- */

.navbar-vertical.navbar-vibrant .navbar-vertical-label,
#mobileNavDrawer .navbar-vertical-label {
    color: #f2eece;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

#mobileNavDrawer .navbar-vertical-divider,
#mobileNavDrawer hr {
    background-color: rgba(242, 238, 206, 0.2);
    border: 0;
    height: 1px;
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/*   Dark mode desaturates the sidebar so the rail stops out-glowing the       */
/*   dimmed page surface next to it. Cream type is unchanged.                  */
/* -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .dark .navbar-vertical.navbar-vibrant {
        background-image: linear-gradient(180deg, #1f5e3d, #0b3d22 65%);
    }
}

.dark #mobileNavDrawer {
    background-image: linear-gradient(180deg, #1f5e3d, #0b3d22 65%);
}