body {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #f8f9fa;
    /* A light grey background for the body */
}

:root {
  --mimic-gold: /* paste your gold hex here, e.g. */ #D4AF37;
}

.page-heading {
    font-size: 1.5rem;
    display: flex;
    align-items: baseline;
    line-height: 1.2;
}

#page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    align-self: center;
}

#page-header-optional-bar:has(> #page-options:empty) {
    gap: 0 !important;
}

.material-icons, .material-symbols-outlined, .material-icons-outlined {
    margin-right: 10px;
}

.icon-margin-right {
    margin-right: 10px;
}

.icon-margin-left {
    margin-left: 10px;
    margin-right: 0px;
}

.page-subheading {
    font-size: 1.1rem;
    /* Example size, adjust as needed */
    color: black;
    /* A neutral, friendly color for the text */
}

.page-sub-heading-small {
    font-size: 0.9rem;
    /* Example size, adjust as needed */
    color: #6c757d;
    /* A neutral, friendly color for the text */
}

.page-heading .after-colon {
    display: inline-flex;
    /* Bottom-align the subtitle so it sits flush with the bottom of the
       title text instead of floating at baseline / middle. */
    align-items: flex-end;
    font-size: 18px;
    margin-left: 10px;
}

/* Inline label/value pair surfaced inside DataTables' empty dt-layout-start
   cell — used by AD page tables to put Record Type on the same horizontal
   line as the entries-per-page + search controls instead of burning a
   stand-alone row above the table. */
.ad-page-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

/* Touch-app icon used in the small "Click a row to …" hint above AD
   report tables + the events drawer body. Kept here so the HTML doesn't
   need to carry inline styles. */
.row-hint {
    color: #6c757d;
}
.row-hint .row-hint-icon {
    font-size: 20px;
    line-height: 1;
    margin-right: 6px;
}

/* Notable-activity rows on the AD summary panels drill into the events behind
   the indicator — make them read as clickable, matching the hourly tables. */
tr.sc-notable-clickable {
    cursor: pointer;
}
tr.sc-notable-clickable:hover > td {
    background: rgba(0, 0, 0, 0.04);
}

/* Donut legend items that drill into events (skips the rolled-up "Other"). */
.sc-dl-row.sc-dl-clickable {
    cursor: pointer;
}
.sc-dl-row.sc-dl-clickable:hover {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

/* DN-bearing AD-report cells (Object DN, Parent DN) — let them wrap onto
   multiple lines instead of being truncated with an ellipsis. break-all
   forces the line break at any character so deeply-nested DNs with no
   spaces still wrap inside the column's width. */
td.ad-dn-cell {
    white-space: normal !important;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 64ch;
    min-width: 40ch;
    vertical-align: top;
}

/* Inside the events drawer the DN columns are often empty ("—") — the Event
   Catalog drilldown shows every AD record type, and only some carry an object
   DN or changeset. Drop the 40ch floor there so empty columns collapse and
   the wider column set still fits the drawer. */
#events-drawer td.ad-dn-cell {
    min-width: 0;
}

#contentLoadingIndicator {
    gap: 1rem;
    align-items: center;
    font-size: 1rem;
    align-self: center;
}

.page-options {
    display: flex;
    justify-content: end;
}

.dt-layout-row:first-of-type {
    margin-top: 0px !important;
}

.provider {
    text-align: center !important;
    vertical-align: middle;
}


/* Button styles */
.btn {
    background-color: var(--brand-accent, #deba5c);
    color: var(--brand-accent-fg, #212529);
    border: none;
    padding: 0.375rem 0.75rem;
    /* Padding inside buttons */
    border-radius: 0.25rem;
    /* Rounded corners for buttons */
    cursor: pointer;
    /* Pointer cursor on hover */
}

.btn:hover {
    background-color: var(--brand-accent-soft, #deba5ca6);
    /* Gold color */
    color: var(--brand-accent-fg, rgb(70, 70, 70));
}



/* dropdown-toggle and dropdown-menu are for the profile menu on the sidebar */
.dropdown-toggle {
    background-color: transparent;
    border: none;
    padding-left: 2px;
    padding-right: 4px;
}

.dropdown-toggle::after {
    display: none;
    /* Hide the little arrow */
}

.dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 1000;
}

.dropdown-menu li a:hover {
    text-decoration: none;
}

.btn-icon {
    background-color: transparent;
    /* Makes the background transparent */
    display: flex;
    border: none;
    /* Removes border */
    padding: 0;
    /* Removes padding */
    cursor: pointer;
    /* Pointer cursor on hover */
    vertical-align: middle;
    /* Aligns the button vertically in line with the text */
    margin-left: 4px;
    /* Space between header text and button */
    margin-right: 10px;
}

/* Style adjustments for loading spinner and message */
#loadingIndicator .spinner-border {
    margin-bottom: 10px;
    /* Added space below spinner */
}

#loadingIndicator p {
    font-size: 1rem;
    /* Ensuring the text is neither too big nor too small */
    color: #6c757d;
    /* A neutral, friendly color for the text */
}

/* Collapsible buttons styling */
.collapsible {
    background-color: #f9f9f9;
    width: 100%;
    color: #444;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: center;
    /* Center the text inside the button */
    outline: none;
    font-size: 15px;
    transition: background-color 0.3s;
    /* Smooth transition for hover effect */
}

.fa-caret-right,
.fa-caret-down {
    transition: transform 0.3s ease;
}

.fa-caret-right {
    transform: rotate(0deg);
    /* Default state, pointing right */
}

.fa-caret-right.expanded {
    transform: rotate(90deg);
    /* Rotated state, pointing down */
}

.content {
    padding: 0 18px;
    background-color: #f8f8f8;
    transition: max-height 0.6s ease-out;
    /* Smooth transition for expanding */
    position: relative;
    z-index: 1;
    box-shadow: 2px 2px 8px #888888;
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow-y: hidden;
    white-space: nowrap;
}

#sidebar-menu a.sidebar-active {
    background-color: #dae0e5 !important;
}

#sidebar-menu a:hover {
    background-color: #e9ecef !important;
    /* Lighter gray for hover */
}

/* sidebar tenant switcher – eye icon  ----------------------------- */
#sidebarWrapper .tenant-switcher i {
    /* keep it pushed to the far right */
    margin-left: auto;
    margin-right: 0.5rem;

    /* 24 × 24 square that centres the Material glyph */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* avoid font baseline shift */

    background: var(--sidebar-surface, #343434);
    border-radius: 4px;

    /* reset the old padding set earlier */
    padding: 0;
}

#sidebarWrapper #customTooltip {
    color: black !important;
}


#sidebarWrapper .tenant-switcher input {
    background: transparent !important;
    color: var(--sidebar-fg, #bbb) !important;
    /* bullets / text */
}

#sidebarWrapper .tenant-switcher i {
    color: var(--sidebar-fg, #bbb) !important;
    /* eye icon colour */
}

#sidebarWrapper .tenant-switcher i:hover {
    background-color: #fbfbfb21 !important;
}

#sidebarWrapper #sidebar-user.border-top {
    border-top-color: var(--sidebar-bg, #2b2b2b) !important;
    /* same as sidebar bg */
}

/* Normal expanded sidebar */
#sidebarWrapper {
    height: 100vh;
    width: 270px;
    flex-shrink: 0;
    position: fixed;
    z-index: 500;
    /* above page content but below modals and menus */
    /* Don’t let flex parent shrink it */
    background-color: var(--sidebar-bg, #2b2b2b) !important;
    /* Make sure background fills the full width */
    display: flex;
    flex-direction: column;
    color: var(--sidebar-fg, #bbb) !important;
    /* So heading is on top, list below */
    transform: translateX(0);
    transition: width 0.3s ease-out, transform 0.3s ease-out;
    margin-left: 0 !important;
    border-right: none !important;
}

@media (max-width: 1024px) {
    #sidebarWrapper {
        transform: translateX(-100%);
    }
    #page-content-wrapper {
        margin-left: 0px !important;
        width: 100% !important;
        padding: 1rem;
    }
    #sidebarWrapper.open {
        transform: translateX(0);
    }
}

#hamburger-menu {
    transform: translateX(200%);
    transition: transform 0.3s ease-out;
    cursor: pointer;
}

#curtain {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    background-color: transparent;
    transition: background-color 0.3s ease-out;
}

#curtain.active {
    background-color: #000000A0;
}

#sidebarWrapper .list-group {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--sidebar-bg, #2b2b2b);
    background-image:
        linear-gradient(var(--sidebar-bg, #2b2b2b) 30%, transparent),
        linear-gradient(transparent, var(--sidebar-bg, #2b2b2b) 70%),
        radial-gradient(farthest-side at 50% 0, var(--sidebar-scroll-shadow, rgba(0, 0, 0, 0.4)), transparent),
        radial-gradient(farthest-side at 50% 100%, var(--sidebar-scroll-shadow, rgba(0, 0, 0, 0.4)), transparent);
    background-position:
        0 0,
        0 100%,
        0 0,
        0 100%;
    background-repeat: no-repeat;
    background-size:
        100% 40px,
        100% 40px,
        100% 15px,
        100% 15px;
    background-attachment:
        local,
        local,
        scroll,
        scroll;
}

#sidebarWrapper .list-group-item {
    background-color: transparent !important;
    /* kill the white bar */
    border: none !important;
    /* remove grey line */
    width: calc(100% - .5rem);
    margin: .25rem;
    margin-bottom: 0;
    border-radius: .125rem;
}

#sidebarWrapper .list-group-item,
#sidebarWrapper .tenant-switcher {
    color: var(--sidebar-fg, #bbb) !important;
}

#sidebarWrapper .list-group-item i {
    color: inherit !important;
}

/* hover → slightly lighter bg + white text */
#sidebarWrapper .list-group-item:hover {
    background-color: var(--sidebar-hover-bg, rgba(251, 251, 251, 0.05)) !important;
    color: var(--sidebar-hover-fg, #ddd) !important;
}


#sidebarWrapper .list-group-item.sidebar-active,
#sidebarWrapper .list-group-item.sidebar-active i {
    color: var(--sidebar-active-fg, #191919) !important;    /* Mimic black */
}

#sidebarWrapper .list-group-item.sidebar-item-hover {
    background-color: var(--sidebar-hover-bg, rgba(251, 251, 251, 0.05)) !important;
    color: var(--sidebar-hover-fg, #ddd) !important;
}

#sidebarWrapper .list-group-item.sidebar-active {
    background-color: var(--sidebar-active-bg, var(--brand-accent-soft, #deba5ca6)) !important;
    /* gold highlight */
    border: none;
}

/* Collapsed sidebar */
#sidebarWrapper.sidebar-collapsed {
    width: 70px;
    /* shrink to icon-only width */
}

/* Hide the brand text in collapsed mode */
#sidebarWrapper.sidebar-collapsed .brand-text {
    display: none;
}

/* Hide link text but keep icons visible in collapsed mode */
#sidebarWrapper.sidebar-collapsed .link-text {
    display: none;
}

#sidebarWrapper.sidebar-collapsed .list-group-item i {
    margin-right: 0;
    text-align: center;
    width: 100%;
}

#page-content-wrapper {
    position: relative;
    margin-left: 250px;
    overflow-x: auto;
    width: calc(100% - 250px);
    height: 100dvh;
    transition: margin-left 0.3s ease-out, width 0.3s ease-out;
}


.info {
    align-content: center;
}

.list-group-item.active {
    background-color: #ced4da !important;
    /* A light gray color */
    color: #000;
    /* Black text color */
    border: 1px solid rgba(0, 0, 0, .125);
}

.load-time {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    text-align: left;
}

.hostname {
    min-width: 260px;
    text-align: left;
}

.form-group {
    display: flex;
    /* This makes the children of .form-group (select, input, button) line up in a row */
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Take full width to utilize space effectively */
}

.form-control {
    flex-grow: 1;
    min-width: 160px;
    /* Adjust as needed */
}

.progress-bar {
    height: 30px;
    background-color: blue;
    /* Foreground showing progress */
    text-align: center;
    color: white;
    /* For text inside the progress bar */
    transition: width 0.4s ease;
    /* Smooth transition for changes */
}

.info-icon {
    font-size: 18px;
    /* Adjust size to fit your design */
    color: #646464;
    /* Subtle grey color, customizable */
    cursor: help;
    /* Changes cursor to help cursor, indicating an interactive element */
    margin-left: 5px;
    /* Adds space between the text and the icon */
    vertical-align: middle;
    /* Aligns icon with the middle of the text */
    padding-bottom: 6px;
    /* Adjust as needed */
}

/* Inline code chip used across the dashboard — events drawer label/value
   pairs, AD page Record Type indicators, search-blob preset clauses, etc.
   Same green Bootstrap-success accent everywhere so values read consistently
   instead of inheriting Bootstrap's default pink <code> color. */
code.events-code,
.events-code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.9em;
    color: #1a8b62;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Suppress the browser/UA focus ring on row-level kebab buttons across
   the AD reports. The kebab is a borderless icon button that visually
   shouldn't get a separate outline — the click target is small and the
   blue ring is more noise than affordance. */
.cx-ad-event-menu,
.cx-ad-event-menu:focus,
.cx-ad-event-menu:focus-visible,
.cx-ad-svc-menu,
.cx-ad-svc-menu:focus,
.cx-ad-svc-menu:focus-visible,
.cx-ad-session-menu,
.cx-ad-session-menu:focus,
.cx-ad-session-menu:focus-visible,
.cx-ad-dc-menu,
.cx-ad-dc-menu:focus,
.cx-ad-dc-menu:focus-visible,
.cx-ad-group-change-menu,
.cx-ad-group-change-menu:focus,
.cx-ad-group-change-menu:focus-visible,
.cx-ad-usn-menu,
.cx-ad-usn-menu:focus,
.cx-ad-usn-menu:focus-visible,
.cx-ad--menu,
.cx-ad--menu:focus,
.cx-ad--menu:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.custom-tooltip {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Positioning relative to the viewport */
    padding: 8px 10px;
    /* Padding inside the tooltip */
    font-size: 14px;
    /* Larger font size for better readability */
    background-color: #fff;
    /* White background */
    border: 1px solid #ddd;
    /* Light grey border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for depth */
    border-radius: 8px;
    /* Rounded corners */
    z-index: 1000;
    /* High z-index to ensure it appears above other elements */
    pointer-events: none;
    /* Ensures that mouse events pass through the tooltip */
}

/* Global <code> override — defeat Bootstrap's default pink and apply the
   site-wide green identifier color. Specific contexts (events-code, tooltip)
   inherit this and can add their own padding/font-size on top. */
code {
    color: #1a8b62;
    background: transparent;
    padding: 0;
}

/* `<code>` inside a CustomTooltip — match the green identifier styling
   used elsewhere on the site (see Salesforce code blocks at #1a8b62).
   Defeats Bootstrap's default pink-on-pink which clashes with the white
   tooltip card and is the wrong semantic color for code. */
.custom-tooltip code {
    color: #1a8b62;
    background: transparent;
    padding: 0;
    font-size: 0.9em;
    word-break: break-all;
}

.dynamic-text {
    display: inline-flex;
    align-items: center;
    flex-grow: 1;
}

.hidden {
    display: none;
}

.red-icon {
    color: red !important;
}

#global-breadcrumb i      { font-size:18px; vertical-align:middle; }
#global-breadcrumb:hover  { color:var(--brand-accent, #deba5c); }  /* mimic-gold on hover */

/* --------- Message Bar --------- */

.message-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    height: 2rem;
}

/* When showing a message, push page content further down */
.message-bar--show-message {
    visibility: visible !important;
}

/* Optional “message section” block inside the bar */
.message-bar-section {
    width: 600px;
    border-radius: 5px;
    padding: 0.25rem 1rem;
    padding-right: 2rem;
    display: none;
    /* hidden by default */
    flex: 1;
    margin-bottom: 0;
}

/* If bar has .message-bar--show-message, reveal the message section */
.message-bar--show-message .message-bar-section {
    display: block;
}

/* Shown state for the message banner */
.message-bar--visible {
    display: block;
}

/* Message variations (error/info/success) */
.message-bar--error {
    background-color: #f8d7da;
    color: #721c24;
}

.message-bar--info {
    background-color: #cce5ff;
    color: #004085;
}

.message-bar--success {
    background-color: #d4edda;
    color: #155724;
}

/* Close (X) button inside the message banner (.close-btn) */
#message-bar .close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    color: inherit;
    font-weight: 400;
}

#page-options label {
    margin-bottom: 0;
}

.dt-search .search-icon {
  /* position: static !important;   override DataTables absolute rule   */
  display: inline-flex;
  align-items: center;
}

.custom-icon {
    width: 24px; 
    height: 24px; 
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: contain;
}

.custom-icon-nav {
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: inline-block;
}

.list-group-item:not(.sidebar-active) .custom-icon-nav {
    /* Grey for the dark rail by default; a light-surface brand sets the
       variable to an ink rendering (see applyChrome). */
    filter: var(--sidebar-icon-filter, brightness(0) saturate(100%) invert(83%) sepia(0%) saturate(1%) hue-rotate(206deg) brightness(90%) contrast(94%));
}

/* The active row leaves the raw (dark) SVG artwork by default — correct on
   the stock gold pill, invisible on a branded one. applyChrome sets the
   filter to white when a brand is active; stock stays untouched. */
.list-group-item.sidebar-active .custom-icon-nav {
    filter: var(--sidebar-active-icon-filter, none);
}

.custom-icon-constellation {
    background-color: black; /* color of the icon */
    -webkit-mask-image: url("/static/images/constellation.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url("/static/images/constellation.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.color-icon-constellation {
    background-image: url("/static/images/constellation.svg");
}

.renderjson {
    font-family: "DM Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

/* IR directory/registry tree: a node name that opens the events drawer.
   Styled like a hyperlink — blue, with the underline only on hover. */
.tree-node-name-link {
    color: #0d6efd;
    cursor: pointer;
}
.tree-node-name-link:hover {
    text-decoration: underline;
}

/* ── Shared donut hover tooltip ─────────────────────────────────────────
   Rendered on <body> (not inside the small donut canvas) so a long label
   (e.g. a full UPN or a notification alert-type) shows in full instead of
   being clipped at the canvas edge. Shared by the AD summary donuts and the
   Notifications page; see scDonutExternalTooltip in utils/SummaryCharts.ts.
   Lives here (always loaded) rather than a page-scoped stylesheet so it works
   on every page that draws a donut. */
.sc-donut-tip {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity .08s ease;
  background: rgba(17, 24, 39, .96);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  max-width: 90vw;
}
.sc-donut-tip-label { font-weight: 600; margin-right: 8px; }
.sc-donut-tip-val { opacity: .85; }

/* ── Dropdowns ─────────────────────────────────────────────────────────
   Dashcam is a light UI, but a <select>'s option list is drawn by the OS,
   and on macOS that menu honours no CSS at all — under a dark system theme
   it came up as a dark block on top of our light pages. color-scheme below
   fixes the closed control (and the popup on the platforms that do respect
   it); the popup itself we draw ourselves, in utils/SelectMenu.ts, using
   the same .dropdown-menu the Export button opens. So .select-menu here is
   only the geometry — the colors are Bootstrap's, shared with every other
   menu in the app, which is the whole point.

   The dark sidebar menus (profile, tenant switcher, language picker) are
   plain DOM built in NavigationManager, not <select>s, and keep their dark
   styling. */
select {
    color-scheme: light;
}

select option,
select optgroup {
    background-color: #fff;
    color: #212529;
}

.select-menu {
    position: fixed;
    display: block;
    z-index: 10500;
    /* Above modals (1051) and the drawers, since a select can live in one. */
    margin: 0;
    padding: 4px 0;
    max-width: min(90vw, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.select-menu .dropdown-item {
    display: flex;
    align-items: center;
    /* .dropdown-item is space-between app-wide (label ⟷ checkmark, for the
       table column menus). A value picker reads left-to-right: tick, label. */
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    cursor: pointer;
}

.select-menu .dropdown-item.disabled {
    cursor: default;
}

/* Fixed gutter so labels line up whether or not a row is ticked. */
.select-menu .select-menu-check {
    flex: 0 0 12px;
    width: 12px;
    color: var(--brand-accent-fg, #212529);
}

.select-menu .select-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .dropdown-item.active is transparent app-wide (see common/tables.css) —
   in a value picker the current choice has to read as chosen, so give it the
   same grey the hover state uses. */
.select-menu .dropdown-item.active,
.select-menu .dropdown-item:hover,
.select-menu .dropdown-item.select-menu-cursor {
    background-color: #f2f2f2;
    color: #212529;
}