/* =========================
   Common/Shared Components
   ========================= */

/* Table styles */
.table-responsive {
    overflow: visible;
}

.table .thead-dark th {
    border-color: transparent;
    /* or the same as the background color */
}

/* Custom header style */
.custom-thead {
    background-color: #f2f2f2;
    /* Light grey background */
    color: #000;
    /* Black text for headers */
    border-bottom: none;
}

.custom-thead th,
.custom-thead td {
    position: relative;
    /* Required for absolute positioning of the button */
    border-bottom: none !important;
    /* Remove the bottom border */
}

.common-table,
.dt-scroll {
    overflow-x: auto;
    border-collapse: collapse;
    margin-top: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
        /* Shadows for borders */
        0 -2px 4px rgba(0, 0, 0, 0.1);
}

.common-table th,
.common-table td {
    padding: 8px;
    text-align: left;
    vertical-align: middle !important;
}

.common-table tbody tr:hover {
    cursor: pointer;
    background-color: #e9ecef !important;
}

.common-table tr.no-hover:hover {
    background-color: inherit;
}

/* Body cells */
.dt-scroll-body tbody tr td:last-child {
    padding-right: 1.25rem !important;
}

/* Footer cells */
.dt-scroll-foot tfoot tr th:last-child {
    padding-right: 1.25rem !important;
}

/* (Optional but recommended) Header cells */
.dt-scroll-head thead tr th:last-child {
    padding-right: 1.25rem !important;
}


/* Custom filter buttons for table columns */
.filter-btn {
    background-color: transparent;
    border: none;
    color: #000 !important;
    /* Set the color to black */
    cursor: pointer;
    font-size: inherit;
    /* Inherit the font size from the th element */
}

.filter-btn:hover {
    color: #555;
    /* Slightly lighter color on hover for feedback */
}

/* Hide the dropdown by default and position it absolutely relative to the th */
.filter-dropdown {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    min-width: 100px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 5px 10px;
    /* Adds padding inside the link for better spacing */
    text-decoration: none;
    /* Removes underline from links */
    max-height: 400px;
    overflow-y: auto;
}

.filter-dropdown a {
    display: block;
    color: black;
    text-decoration: none;
    font-weight: normal;
}

.filter-dropdown a:hover {
    background-color: #f2f2f2;
    /* Adds a light grey background on hover for better interaction feedback */
    text-decoration: none;
}

.show-dropdown {
    display: block;
}


.checkmark {
    color: var(--brand-accent-soft, #deba5ca6);
    display: none;
    /* Hide by default */
    text-align: right;
    padding-left: 10px;
    float: right;
    /* Position to the right */
}

.table-menu-btn {
    padding-right: 0 !important;
}

.dropdown-item {
    padding: 5px 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#nodesMenu .dropdown-item {
    justify-content: left;
}

.dropdown-item.active {
    background-color: transparent;
    /* Light grey background for active item */
    color: black
}

.dropdown-item:active {
    background-color: #f2f2f2;
    /* Light grey background for active item */
    color: black
}

.dropdown-item.active .checkmark {
    display: inline-block;
    /* Show when active */
}

.filter-active {
    color: var(--brand-accent-soft, #deba5ca6);
}

.timestamp-milli {
    min-width: 195px;
}

.timestamp-minutes {
    min-width: 165px;
}

.timestamp {
    min-width: 185px;
}

/* CSV table styles */
.csv-common-table {
    min-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
        /* Shadows for borders */
        0 -2px 4px rgba(0, 0, 0, 0.1);
}

.csv-common-table tr.no-hover:hover {
    background-color: inherit;
    /* Keeps the background the same as non-hovered state */
}


.csv-common-table th,
.csv-common-table td {
    padding: 8px;
    text-align: left;
    vertical-align: middle !important;
}

.csv-common-table tr:hover {
    background-color: #f5f5f5;
    /* Hover effect for table rows */
}

.csv-common-table th {
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    /* Center vertically */
    justify-content: space-between;
    /* Push content to both ends */
    background-color: #f2f2f2;
    color: #000;
    padding-right: 8px;
}

.csv-common-table tr {
    display: table-row;
}

#csvTable {
    table-layout: fixed;
    width: 100%;
}

#csvTable th,
#csvTable td {
    white-space: nowrap;
    /* prevent multi-line wrapping */
    overflow: hidden;
    /* hide overflow text */
    text-overflow: ellipsis;
    /* show ... if content is wider */
}

table.dataTable thead th.dt-colresizable-hover {
    cursor: col-resize !important;
}

/*
 *  DataTables Custom Search Styling
 */

div.dt-search {
    position: relative;
    text-align: left;
}

div.dt-search label {
    font-size: 0;
}

div.dt-search .search-icon {
    position: absolute;
    left: 5px;
    top: 43%;
    transform: translateY(-40%);
    color: #5a6b7b;
    font-size: 24px;
    pointer-events: none;
}

/* Style the actual search input field */
div.dt-search input[type="search"] {
    width: 200px;
    /* UPDATED: Reduced width */
    height: 36px;
    /* UPDATED: Reduced height for a more compact feel */
    font-size: 16px;
    /* UPDATED: Slightly smaller font */

    /* UPDATED: Adjusted padding to match new height and icon size */
    /* top/bottom padding is smaller, left padding makes space for the smaller icon */
    padding: 6px 10px 6px 38px;

    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-left: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* No blue outline on focus */
div.dt-search input[type="search"]:focus {
    outline: none;
    box-shadow: none;
    border-color: #d1d5db;
}

.truncate {
    white-space: nowrap;
    /* Prevent the text from wrapping to the next line */
    overflow: hidden;
    /* Hide the overflowing text */
    text-overflow: ellipsis;
    /* Add the "..." */
    max-width: 0;
    /* A trick to make text-overflow work in flex/table cells */
}


.fa-windows {
    color: #0078D6;
}

.fa-linux {
    color: #333;
}

select.dt-input {
    margin-right: 10px;
}

/* No blue focus ring left sitting on the "entries per page" picker after a
   click. The browser's default outline stays painted until focus moves, so
   every table was left with a ringed select after the user changed the page
   size. Same treatment the search box above already gets
   (div.dt-search input[type="search"]:focus), applied to the other half of the
   pair so the two controls behave alike. */
select.dt-input:focus,
select.np-window-select:focus,
select.dt-style-select:focus {
    outline: none;
    box-shadow: none;
}

/* Standalone <select>s that live OUTSIDE a DataTables table but should read as
   the same control as its "entries per page" picker: the Network Profiler
   "Window" range and the Profile page's settings selects.
   DataTables ships that styling from the CDN sheet (dataTables.dataTables.css),
   scoped under `div.dt-container` — so `dt-input` alone gets NONE of it off a
   table and the select falls back to the raw browser control (no padding,
   square corners, dark #767676 border). Hence this shared recipe, measured off
   the live control: 1px #aaa, 3px radius, 4px padding, flat/transparent.
   `dt-style-select` is ours, not a DataTables class. */
select.np-window-select,
select.dt-style-select {
    width: auto;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    padding: 4px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: transparent;
    box-shadow: none;
}

/* Network Profiler pins a compact 13px to sit inside its toolbar. */
select.np-window-select {
    margin-left: 8px;
    font-size: 13px;
    color: inherit;
    line-height: 1;
}

/* Settings selects take the page's own font size and the DataTables control's
   text colour. Deliberately NO line-height override — the DataTables select
   runs at `normal`, and pinning 1 here would leave ours visibly shorter. */
select.dt-style-select {
    color: #212529;
}

/* Text inputs that sit next to a dt-style-select and must read as the same
   control (the Vulnerability Sources tenant search): identical recipe, so the
   pair lines up to the pixel. type="search" gets the browser's cancel button
   for free; nothing else about it is styled. */
input.dt-style-input {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    /* `normal`, like the select: the page's 1.5 line-height would make the
       input 4px taller than the select it sits beside. The extra vertical
       pixel covers the select's built-in arrow inset, so both come out the
       same height (measured: 30px at the page's 16px). */
    line-height: normal;
    padding: 5px 4px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: transparent;
    box-shadow: none;
    color: #212529;
}

select.np-window-select:focus,
select.dt-style-select:focus,
input.dt-style-input:focus {
    outline: none;
    box-shadow: none;
    border-color: #888;
}

/* Network Profiler category pills (port category, IP class) — small, rounded,
   semibold chips that colour-code types inside the report tables. */
.np-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

/* Leftalign empty table messages */
table.dataTable td.dt-empty {
    text-align: left;
}

.dt-length label {
    margin-bottom: 0;
}

/* Remove gap between header and filter icon */
table.dataTable thead>tr>th div.dt-column-header {
    gap: 0px;
}


/* Style the table container created by DataTables */
.datatable-as-list_wrapper .dt-layout-row {
    padding: 0.5em 0;
}

/* Make each table row a flex container */
.datatable-as-list tbody tr {
    display: flex;
    /*  <-- The key change!  */
    align-items: center;
    /*  Vertically align content in the middle */
    cursor: pointer;
    padding: 4px 0;
    white-space: nowrap;
}

/* Style the cells (flex items) within the row */
.datatable-as-list tbody td {
    border: none !important;
    /* Remove all borders from cells */
    box-shadow: none !important;
    padding: 0 5px !important;
    /* Adjust padding for spacing */
}

/* Specifically style the first cell (the icon) to not grow */
.datatable-as-list tbody td.dt-control {
    flex: 0 0 20px;
    /* Don't grow, don't shrink, base width 20px */
    text-align: center;
}

/* Hide the table header */
.datatable-as-list thead {
    display: none;
}

/* --- Styling for the expanded child row --- */

/* When a row is expanded, remove its bottom border */
.datatable-as-list tr.dt-hasChild {
    border-bottom: none;
}

/* Style the container for the child details */
.datatable-as-list tr.dt-child td {
    display: block;
    /* Make the child cell a full-width block */
    width: 100%;
    padding: 10px 25px !important;
    /* Indent the details */
    background-color: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
}

.datatable-as-list td.dt-control::before {
    content: none !important;
}

.dt-column-order::before {
    top: 0em;
}

.dt-column-order::after {
    bottom: 0em;
}

div.dt-container div.dt-layout-row {
    margin: 1rem 0;
}

/* Override a specific style from styles.css */
.dtcc-button .material-icons {
    margin-right: 0px !important;
}

/* Widen DataTables ColumnControl dropdowns globally for long IDs / names. */
div.dtcc-dropdown,
div.dtcc-popover,
div.dtcc-collection {
    min-width: 380px;
}

div.dtcc-dropdown .dtcc-dropdown-liner,
div.dtcc-popover .dtcc-dropdown-liner,
div.dtcc-collection .dtcc-dropdown-liner {
    min-width: 380px;
}

div.dtcc-dropdown label,
div.dtcc-popover label,
div.dtcc-collection label {
    max-width: none;
}

.tenant-header {
    display: flex;
    /* Establishes a flex container */
    justify-content: space-between;
    /* Pushes children to opposite ends */
    align-items: center;
    /* Vertically aligns items in the center */
    width: 100%;
    /* Ensures the container takes up the full header width */
}

/* ───────── Executables page – allow wrapping for long text ───────── */
td.llm-summary,
td.llm-description {
    white-space: normal !important;
    /* override DataTables default */
    word-break: break-word;
    /* split very long tokens if needed */
    line-height: 1.35;
    /* optional: a touch more breathing room */
}

/* Bigger first/prev/next/last arrows on every DataTables pager (the
   «‹›» glyphs are hard to hit at the stylesheet default size). */
div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.next,
div.dt-container .dt-paging .dt-paging-button.last {
    font-size: 1.3em;
    line-height: 1;
    padding-top: 0.1em;
}

/* ── CVE column heading: label + info icon as one unit ─────────────────
   The info icon carries the column's definition (pill format, data feeds,
   NVD attribution) once per table, instead of repeating the disclaimer in
   every cell tooltip. ColumnControl wraps th contents in its own flex row
   beside the filter button; inline-flex keeps the icon glued to the label
   (same pattern as .mp-th on the Missing Patches page). */
.cve-th {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.cve-th-info {
  font-size: 13px;
  line-height: 1;
  color: #b0b6be;
  cursor: help;
  flex: 0 0 auto;
  align-self: center;
}
.cve-th-info:hover { color: #6b7280; }

/* ── Source chips (ENG-4292) ──────────────────────────────────────────
   The Source column shared by Missing Patches and Exploited
   Vulnerabilities (ts/ui/VulnSourceChips.ts). Lives here rather than in a
   page stylesheet because NavigationManager loads exactly one page
   stylesheet at a time and both pages render these. */
.vs-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}
.vs-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid #d8d2c0;
  border-radius: 10px;
  background: #faf8f2;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: #3d3d3d;
  white-space: nowrap;
}
/* Dashcam's own lanes (mimic / osv / msrc / wua) — what the Mimic node
   observed — read differently from what a vendor told us. */
.vs-chip-own {
  border-color: #c9bd8f;
  background: #f4efdc;
  color: #5b4b12;
}
.vs-no-node { margin-left: 4px; }

/* Page-level source filter: a row of toggle chips next to the table
   title, one per source present in the scope. */
.vs-filter {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: #374151;
}
.vs-filter-label { font-weight: 600; margin-right: 2px; }
.vs-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid #d8d2c0;
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
  color: #3d3d3d;
  cursor: pointer;
  user-select: none;
}
.vs-filter-chip:hover { background: #faf8f2; }
.vs-filter-chip.on {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}
.vs-filter-clear {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}