/* Design tokens (--sabre-chrome-*, --gnt-*) are defined once in
   Sabre.Shared.Web/wwwroot/css/theme-tokens.css, linked by every host page before this file.
   Do not redefine them here; reference them. */

/* Keep Syncfusion flat buttons legible when they sit on the dark chrome. */
.header-row .e-btn.e-flat,
.portal-top-toolbar .e-btn.e-flat,
.platform-top-toolbar .e-btn.e-flat,
.tenant-top-toolbar .e-btn.e-flat,
.help-layout-header .e-btn.e-flat {
    color: var(--sabre-chrome-fg);
}

/* Same problem, different component: a Syncfusion menu inside the chrome inherits the theme's
   *content* text colour, which is near-black — so "System Settings" and friends rendered dark on the
   dark header and were all but invisible. Found in the 2026-09-11 visual pass; the flat-button rule
   above had already solved this for buttons and was simply never extended to menus. */
.header-row .e-menu-container .e-menu .e-menu-item,
.header-center .e-menu-container .e-menu .e-menu-item,
.portal-top-toolbar .e-menu-container .e-menu .e-menu-item,
.platform-top-toolbar .e-menu-container .e-menu .e-menu-item,
.tenant-top-toolbar .e-menu-container .e-menu .e-menu-item,
.help-layout-header .e-menu-container .e-menu .e-menu-item {
    background: transparent;
    color: var(--sabre-chrome-fg);
}

.header-row .e-menu-container .e-menu .e-menu-item .e-caret,
.header-center .e-menu-container .e-menu .e-menu-item .e-caret,
.portal-top-toolbar .e-menu-container .e-menu .e-menu-item .e-caret,
.platform-top-toolbar .e-menu-container .e-menu .e-menu-item .e-caret,
.tenant-top-toolbar .e-menu-container .e-menu .e-menu-item .e-caret,
.help-layout-header .e-menu-container .e-menu .e-menu-item .e-caret {
    color: var(--sabre-chrome-fg);
}

/* Hover needs its own rule: the theme's hover background is a light content colour, which would put
   white-on-white here. Use the chrome's own translucent border tint instead. */
.header-row .e-menu-container .e-menu .e-menu-item.e-focused,
.header-center .e-menu-container .e-menu .e-menu-item.e-focused,
.portal-top-toolbar .e-menu-container .e-menu .e-menu-item.e-focused,
.platform-top-toolbar .e-menu-container .e-menu .e-menu-item.e-focused,
.tenant-top-toolbar .e-menu-container .e-menu .e-menu-item.e-focused,
.help-layout-header .e-menu-container .e-menu .e-menu-item.e-focused {
    background: var(--sabre-chrome-border);
    color: var(--sabre-chrome-fg);
}

/* The drop-down these open is a normal popup on a normal surface, so it must keep the content
   colours — scope the chrome override to the bar itself, never the popup. */
.e-menu-popup .e-menu-item {
    color: var(--gnt-text-color);
}

/* Body text follows the theme's Body Font token. Before the theme manager this was a literal
   'Helvetica Neue' stack while Syncfusion components rendered in system-ui, so plain HTML and
   controls disagreed; both now read the same token. */
html, body {
    font-family: var(--gnt-font-body);
    font-size: var(--gnt-font-size);
}

a, .btn-link {
    color: var(--gnt-primary-color);
}

.btn-primary {
    color: var(--gnt-text-inverse);
    background-color: var(--gnt-primary-color);
    border-color: var(--gnt-primary-strong);
}

#app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.gnt-form {
    flex: auto;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

@media (min-width: 768px) {
    #app {
        flex-direction: row;
    }
}

/* First form-group fieldset: the theme's .e-data-form .e-form-group margin-top:20px is a dead
   band above the first group in manager detail forms — zero it there only. */
.gnt-manager-form .e-form-layout > :first-child > fieldset.e-form-group,
.gnt-manager-form .e-form-layout > fieldset.e-form-group:first-child {
    margin-top: 0;
}

/* GNTFormItem field-event capture wrapper (click/dblclick/contextmenu → GNTDataForm sink);
   display:contents keeps it out of the Syncfusion form layout entirely */
.gnt-formitem-field-events {
    display: contents;
}

/* GNTFormItem padding helper.
   Default is handled by GNTFormItem itself (LeftPadding/RightPadding default to 3px).
   These rules use CSS variables; the component only needs to add the class. */
.gnt-formitem-pad {
    padding-left: var(--gnt-formitem-pl);
    padding-right: var(--gnt-formitem-pr);
}

/* GNTFormItem padding classes (Syncfusion DataForm FormItem CssClass) */
.gnt-formitem-pad-l3-r3 {
    padding-left: 3px;
    padding-right: 3px;
}

.gnt-formitem-pad-l0-r0 {
    padding-left: 0;
    padding-right: 0;
}

.gnt-formitem-pad-l6-r6 {
    padding-left: 6px;
    padding-right: 6px;
}

.gnt-formitem-pad-l10-r10 {
    padding-left: 10px;
    padding-right: 10px;
}

.gnt-formitem-pad-l6-r0 {
    padding-left: 6px;
    padding-right: 0;
}

.gnt-formitem-pad-l0-r6 {
    padding-left: 0;
    padding-right: 6px;
}

.e-data-form .gnt-formitem {
    box-sizing: border-box;
    min-width: 0;
}

.e-data-form .gnt-formitem .form-label,
.e-data-form .gnt-formitem .e-label {
    display: block;
    margin: 0 0 1px 0;
    line-height: 1.2;
}

.e-data-form .gnt-formitem .e-control-wrapper,
.e-data-form .gnt-formitem .e-input-group,
.e-data-form .gnt-formitem .e-control-container,
.e-data-form .gnt-formitem.e-control-wrapper,
.e-data-form .gnt-formitem.e-input-group,
.e-data-form .gnt-formitem.e-control-container {
    width: 100%;
    max-width: 100%;
}

.gnt-formitem-label-top .e-label,
.gnt-formitem-label-top label {
    margin-bottom: 1px;
}

/* Main tab chrome now ships with the shared workspace: _content/Sabre.Shared.Web/css/main-tabs.css */

/* Toolbar icon drawings and command colours: gnt-icons.css and gnt-components.css (the copy here was removed
   2026-10-13 when the icon set was centralised). */

/* Favourite star cell/button: GNTGridSelector_GridSurface.razor.css (this copy removed 2026-10-05, CSS-08). */

.gnt-grid-selector-root .e-grid tr.gnt-grid-selected-record-row > td.e-rowcell,
.gnt-grid-selector-root .e-grid td.gnt-grid-selected-record-cell {
    background-color: var(--gnt-hover-bg) !important;
}

/* Left nav selected item */
#MainLeftNav .e-treeview .e-list-item.e-active > .e-fullrow,
#MainLeftNav .e-treeview .e-list-item.e-active > .e-text-content,
#MainLeftNav .e-treeview .e-list-item.e-node-focus.e-active > .e-fullrow,
#MainLeftNav .e-treeview .e-list-item.e-node-focus.e-active > .e-text-content {
    background-color: var(--gnt-selected-bg) !important;
    color: var(--gnt-selected-fg) !important;
}

#MainLeftNav .e-treeview .e-list-item.e-active .main-left-nav-title,
#MainLeftNav .e-treeview .e-list-item.e-node-focus.e-active .main-left-nav-title {
    color: var(--gnt-selected-fg) !important;
}

#MainSplitter > .e-pane.e-scrollable:first-of-type,
#main-sidepane {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
}

#MainSplitter > .e-pane.e-scrollable:first-of-type::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

#MainLeftNav .main-left-nav-scroll {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#MainLeftNav #TreeView.e-treeview {
    overflow: visible !important;
}

#MainLeftNav #TreeView.e-treeview > .e-list-parent {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

#MainLeftNav #TreeView.e-treeview.e-fullrow-wrap .e-fullrow {
    left: 0 !important;
    right: 17px !important;
    width: auto !important;
}

#MainLeftNav #TreeView.e-treeview.e-fullrow-wrap .e-text-content {
    max-width: calc(100% - 17px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#MainLeftNav #TreeView.e-treeview .e-list-text,
#MainLeftNav #TreeView.e-treeview .main-left-nav-node,
#MainLeftNav #TreeView.e-treeview .main-left-nav-title {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Left nav density */
#MainLeftNav.gnt-left-nav-density-compressed .e-treeview .e-list-item {
    min-height: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .e-treeview .e-list-item .e-ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .e-treeview .e-list-item > .e-fullrow {
    height: 22px !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .e-treeview .e-list-item > .e-text-content {
    height: 22px !important;
    min-height: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .e-treeview .e-list-item .e-list-text {
    line-height: 22px !important;
    min-height: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .e-treeview .e-list-item div.e-icons.interaction {
    line-height: 22px !important;
    min-height: 22px !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .main-left-nav-node {
    gap: .28rem !important;
    min-height: 22px !important;
}

#MainLeftNav.gnt-left-nav-density-compressed .main-left-nav-favourite,
#MainLeftNav.gnt-left-nav-density-compressed .main-left-nav-favourite-placeholder {
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    font-size: .9rem !important;
}


/* Left nav follows the per-user density (html[data-gnt-density], footer tool tray). Once a density is
   set it wins over the older gnt-left-nav-density-* class above, which only reads the grid row-height
   setting. One row height drives the item, its full-row highlight, the text and the expand icon. */
html[data-gnt-density="Compact"] #MainLeftNav { --gnt-left-nav-row: 22px; --gnt-left-nav-star: 1rem; }
html[data-gnt-density="Normal"] #MainLeftNav { --gnt-left-nav-row: 30px; --gnt-left-nav-star: 1.25rem; }
html[data-gnt-density="Comfortable"] #MainLeftNav { --gnt-left-nav-row: 40px; --gnt-left-nav-star: 1.25rem; }

html[data-gnt-density] #MainLeftNav .e-treeview .e-list-item {
    min-height: var(--gnt-left-nav-row) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html[data-gnt-density] #MainLeftNav .e-treeview .e-list-item .e-ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html[data-gnt-density] #MainLeftNav .e-treeview .e-list-item > .e-fullrow {
    height: var(--gnt-left-nav-row) !important;
}

html[data-gnt-density] #MainLeftNav .e-treeview .e-list-item > .e-text-content {
    height: var(--gnt-left-nav-row) !important;
    min-height: var(--gnt-left-nav-row) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html[data-gnt-density] #MainLeftNav .e-treeview .e-list-item .e-list-text,
html[data-gnt-density] #MainLeftNav .e-treeview .e-list-item div.e-icons.interaction {
    line-height: var(--gnt-left-nav-row) !important;
    min-height: var(--gnt-left-nav-row) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html[data-gnt-density] #MainLeftNav .main-left-nav-node {
    min-height: var(--gnt-left-nav-row) !important;
}

html[data-gnt-density] #MainLeftNav .main-left-nav-favourite,
html[data-gnt-density] #MainLeftNav .main-left-nav-favourite-placeholder {
    width: var(--gnt-left-nav-star) !important;
    min-width: var(--gnt-left-nav-star) !important;
    height: var(--gnt-left-nav-star) !important;
    min-height: var(--gnt-left-nav-star) !important;
}


/* ==== Footer tool tray (Sabre.App.Web/Shared/FooterToolTray.razor) ====
   Chips sit in the footer chrome inside a frame whose width is dragged from its left grip
   (gnt-footer-tray.js). Density / Font Size / Appearance cycle on click; Time Zone and Culture
   open a panel above the footer. */
.gnt-footer-tray-frame {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-left: 10px;
}

.gnt-footer-tray-frame.is-resizing {
    user-select: none;
}

.gnt-footer-tray__grip {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 8px;
    cursor: ew-resize;
    border-left: 2px dotted var(--sabre-chrome-border);
    opacity: 0.8;
}

.gnt-footer-tray__grip:hover {
    border-left-color: var(--sabre-chrome-fg);
}

.gnt-footer-tray {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
    margin-left: auto;
}

/* A centred flex box, not a block: a chip whose glyph is drawn (the density bars) has no text baseline,
   so as an inline-flex child of a block it sat on the line's strut and 4px lower than its neighbours. */
.gnt-footer-tray__item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Pixel sizes throughout, and a fixed width per chip: the tray is where the user changes text size and
   density, so its own tiles must not move or resize under the pointer while they cycle (Greg, 2026-10-04). */
.gnt-footer-tray__chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    box-sizing: border-box;
    height: 22px;
    width: 78px;
    padding: 0 6px;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    color: var(--sabre-chrome-fg);
    background: transparent;
    border: 1px solid var(--sabre-chrome-border);
    border-radius: var(--gnt-radius);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

.gnt-footer-tray__chip > .gnt-footer-tray__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The two pickers carry long names (a time zone, a culture): wider, still fixed. */
.gnt-footer-tray__chip--wide {
    width: 112px;
}

/* Row height: three bars whose spacing shows the setting. Drawn, not a character, so the three states
   line up in the same 12px slot. */
.gnt-footer-tray__glyph--density-compact,
.gnt-footer-tray__glyph--density-normal,
.gnt-footer-tray__glyph--density-comfortable {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 14px;
}

.gnt-footer-tray__glyph--density-compact > i,
.gnt-footer-tray__glyph--density-normal > i,
.gnt-footer-tray__glyph--density-comfortable > i {
    display: block;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.gnt-footer-tray__glyph--density-compact > i + i { margin-top: 2px; }
.gnt-footer-tray__glyph--density-normal > i + i { margin-top: 3.5px; }
.gnt-footer-tray__glyph--density-comfortable > i + i { margin-top: 5px; }

/* Text size: the A itself is small, normal or large. */
.gnt-footer-tray__glyph--font-small { font-size: 9px; }
.gnt-footer-tray__glyph--font-normal { font-size: 12px; }
.gnt-footer-tray__glyph--font-large { font-size: 15px; font-weight: 700; }

/* The names toggle: a glyph alone. */
.gnt-footer-tray__chip--toggle {
    width: 22px;
    padding: 0;
    justify-content: center;
}

/* Icons only: every chip collapses to its glyph, the same fixed square, so the targets still never move. */
.gnt-footer-tray--icons .gnt-footer-tray__chip {
    width: 24px;
    padding: 0;
    justify-content: center;
}

.gnt-footer-tray--icons .gnt-footer-tray__label {
    display: none;
}

.gnt-footer-tray__chip:hover,
.gnt-footer-tray__chip.is-open {
    background: var(--sabre-chrome-border);
}

.gnt-footer-tray__glyph {
    flex: 0 0 auto;
    width: 12px;
    text-align: center;
    font-size: 12px;
    opacity: 0.85;
}

/* An icon from the shared set (GntIcons) in a chip: the glyph slot's size. */
.gnt-footer-tray__glyph.gnt-icon {
    --gnticon-size: 13px;
    width: 13px;
    opacity: 0.85;
}

.gnt-footer-tray__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

/* Fixed, not absolute: the frame clips its overflow, so a panel must live outside it. */
.gnt-footer-tray__panel {
    position: fixed;
    right: 16px;
    bottom: 58px;
    z-index: 1050;
    min-width: 360px;
    padding: 10px 12px;
    color: var(--gnt-text-color);
    background: var(--gnt-surface-color);
    border: 1px solid var(--gnt-border-soft);
    border-radius: var(--gnt-radius);
    box-shadow: var(--gnt-shadow-lg);
    font-size: 0.85rem;
    white-space: normal;
}

.gnt-footer-tray__title {
    font-weight: 600;
    margin-bottom: 8px;
}

.gnt-footer-tray__note {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--gnt-muted-color);
}

/* The environment's own setting, shown before the user's override. */
.gnt-footer-tray__default {
    margin: 0 0 10px;
    font-size: 0.85rem;
}

.gnt-footer-tray__default-label {
    display: inline-block;
    margin-right: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gnt-muted-color);
}

.gnt-footer-tray__default--missing {
    color: var(--gnt-muted-color);
}

.gnt-footer-tray__default--missing a,
.gnt-footer-tray__default--missing span {
    display: block;
    margin-top: 2px;
}

.gnt-footer-tray__subtitle {
    margin-bottom: 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gnt-muted-color);
}

/* ==== Per-user density (html[data-gnt-density], set by gnt-theme.js applyUserDisplay) ====
   A host carrying .gnt-grid-row-height-fixed is excluded: a side view (the cashflow pane) is
   dictating its row height and the density must not override it.
   Compact mirrors the grid's compressed row mode; Comfortable adds breathing room. Normal is the
   Syncfusion default and needs no rule. Form padding follows the --gnt-formitem-* / --gnt-row-padding
   variables the applier scales at the same time. */
html[data-gnt-density="Compact"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-row,
html[data-gnt-density="Compact"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell {
    height: 22px !important;
}

html[data-gnt-density="Compact"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1;
}

html[data-gnt-density="Compact"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell > div,
html[data-gnt-density="Compact"] .gnt-grid-selector-grid-host .grid-col-combo-display,
html[data-gnt-density="Compact"] .gnt-grid-selector-grid-host .gnt-favourite-cell {
    min-height: 0;
    height: 100%;
    line-height: 1.1;
}

/* Normal is stated explicitly (Syncfusion's stock 22px line + 6px padding) so it still differs from
   Compact when the grid's own row-height mode is Compressed. */
html[data-gnt-density="Normal"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-row,
html[data-gnt-density="Normal"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell {
    height: 35px !important;
}

html[data-gnt-density="Normal"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 22px;
}

html[data-gnt-density="Comfortable"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-row,
html[data-gnt-density="Comfortable"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell {
    height: 40px !important;
}

html[data-gnt-density="Comfortable"] .gnt-grid-selector-grid-host:not(.gnt-grid-row-height-fixed) .e-rowcell {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}