/* Standalone styles mirroring app-packages-map-table (packages-map-table.component.css + Bootstrap table basics). */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  background: #f5f6f8;
  color: #212529;
  font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 12px;
  padding: 14px 18px;
  background: white;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

.software-map-page-title h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 0px !important;
    padding: 0 !important;
    color: black;
}

.version-label {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size:12px;
}

/* Column toggles: colour-coded chips matching the table section headers. */
.column-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.column-toggles__label {
  margin-right: 4px;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toggle-chip {
  --chip-accent: #0d70ef;
  --chip-tint: #eaf2fe;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.toggle-chip--modules { --chip-accent: #2a9fd8; --chip-tint: #e6f4fc; }
.toggle-chip--packages { --chip-accent: #3fb33a; --chip-tint: #e8f8e7; }
.toggle-chip--tools { --chip-accent: #f08a24; --chip-tint: #fff1e3; }

/* Native checkbox stays focusable and accessible, but is visually replaced by the chip. */
.toggle-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.toggle-chip__body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: white;
  color: #475467;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.toggle-chip:hover .toggle-chip__body {
  border-color: var(--chip-accent);
}

.toggle-chip__indicator {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.5px solid #98a2b3;
  border-radius: 50%;
  background: white;
  transition: background-color 0.15s, border-color 0.15s;
}

.toggle-chip input:checked + .toggle-chip__body {
  border-color: var(--chip-accent);
  background: var(--chip-tint);
  color: #101828;
}

.toggle-chip input:checked + .toggle-chip__body .toggle-chip__indicator {
  border-color: var(--chip-accent);
  background: var(--chip-accent);
}

/* Check mark drawn with borders. */
.toggle-chip input:checked + .toggle-chip__body .toggle-chip__indicator::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.toggle-chip input:focus-visible + .toggle-chip__body {
  outline: 2px solid var(--chip-accent);
  outline-offset: 2px;
}

.error-message {
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid #f1aeb5;
  border-radius: 4px;
  background: #f8d7da;
  color: #842029;
}

/* Table */
:root {
  --group-col-width: 180px;
}

.table-wrapper {
  overflow-x: auto;
  background: white;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  /* clip (not hidden) so the table does not become a scroll container and break sticky columns. */
  overflow: clip;
  z-index: 1;
  position: relative;
}

td,
th {
  position: relative;
  padding: 5px;
  border: 1px solid #dee2e6;
  line-height: 1.5;
  font-size: 12px;
}

th {
  font-size: 12px;
  font-weight: 700;
}

td {
  text-align: center;
  vertical-align: middle;
}

.package-map-table tbody {
  border-top: 2px solid #000;
}

.border-none {
  border: none;
}

/* Crosshair highlight on hover (same technique as the Angular component). */
td:hover::before {
  background-color: rgb(252, 252, 82);
  content: '\00a0';
  height: 100%;
  left: -5000px;
  position: absolute;
  top: 0;
  width: 10000px;
  z-index: -1;
}

td:hover::after {
  background-color: rgb(252, 252, 82);
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

/* The sticky name cell is opaque, so it gets the row highlight as a background instead. */
.package-map-table tbody tr:hover > .package-name-cell {
  background-color: rgb(252, 252, 82);
}

.package-map-table tbody tr:has(> .package-name-cell:hover) > td {
  background-color: rgb(252, 252, 82);
}

/* First two columns stay in place while scrolling horizontally. */
.sticky-col {
  position: sticky;
  z-index: 2;
  background-color: white;
}

/* The outer white shadow hides the sub-pixel gap collapsed borders leave at the left edge. */
.sticky-col--group {
  left: 0;
  box-shadow: -2px 0 0 white;
}

.sticky-col--name {
  left: var(--group-col-width);
  box-shadow: 4px 0 4px -2px rgb(0 0 0 / 15%);
}

/* On narrow screens the two pinned columns would fill the whole width, so they scroll normally. */
@media (max-width: 640px) {
  .sticky-col {
    position: relative;
  }

  .sticky-col--name {
    left: auto;
    box-shadow: none;
  }
}

/* Section headers */
.section-header {
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  color: black;
  font-size: 12px;
}

.section-header--modules { background: #a5d8f3; }
.section-header--packages { background: #7dde79; }
.section-header--tools { background: #ffa44f; }
.section-header--interfaces { background: #dcb7ff; }

.vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 180px;
  width: 20px;
  margin: 0;
  padding: 5px;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.vertical--modules { background: rgb(44 181 255 / 30%); }
.vertical--packages { background: rgb(74 253 67 / 40%); }
.vertical--tools { background: rgb(255 149 50 / 37%); }
.vertical--interfaces { background: rgb(169 99 236 / 35%); }

.computation-module-cell { background-color: rgb(190 229 250 / 40%); }
.included-package-cell { background-color: rgb(150 255 159 / 40%); }
.tool-cell { background-color: rgb(255 219 153 / 40%); }
.interface-module-cell { background-color: rgb(234 214 254 / 33%); }

/* Group and package cells */
/* Fixed-width group label: flat brand blue with an accent edge, alternating shade per group. */
.group-name-cell {
  width: var(--group-col-width);
  min-width: var(--group-col-width);
  max-width: var(--group-col-width);
  padding: 6px 10px 6px 12px;
  vertical-align: middle;
  text-align: left;
  color: white;
  background: #1a5fd9;
  border-color: #134cb4;
  white-space: normal;
}

.package-map-table tbody:nth-of-type(even) .group-name-cell {
  background: #2f72e6;
}

.group-name-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.group-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.group-count {
  flex: none;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
  font-size:12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.package-name-cell {
  text-align: left;
  white-space: nowrap;
  min-width: 250px;
  padding: 0 8px;
}

.package-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.bg-danger,
.bg-danger td,
.bg-danger th {
  background-color: #ff9595;
}

/* Icons */
.icon {
  display: inline-block;
  fill: currentColor;
  vertical-align: middle;
}

.inclusion-icon-container {
  display: block;
  height: 16px;
  line-height: 16px;
}

.inclusion-icon {
  width: 16px;
  height: 16px;
  color: green;
}

.inclusion-icon--restricted {
  color: #dc3545;
}

.empty-state {
  padding: 24px;
  text-align: center;
  color: #6c757d;
}

/* Restricted modules: the red check is a button that opens the restrictions popover. */
.restriction-trigger {
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  line-height: 16px;
}

.restriction-trigger:hover .inclusion-icon--restricted,
.restriction-trigger[aria-expanded="true"] .inclusion-icon--restricted {
  transform: scale(1.2);
}

.restriction-trigger:focus-visible {
  outline: 2px solid #dc3545;
  outline-offset: 1px;
  border-radius: 50%;
}

/* Appended to <body> by packages-map.js; z-index sits above the site's fixed header. */
.restriction-popover {
  position: fixed;
  z-index: 1070;
  box-sizing: border-box;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 12px 14px;
  background: white;
  border: 1px solid #e4e7ec;
  border-top: 3px solid #dc3545;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(16 24 40 / 16%);
  color: #101828;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

.restriction-popover[hidden] {
  display: none;
}

.restriction-popover__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.restriction-popover__eyebrow {
  color: #b42318;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.restriction-popover__title {
  color: #667085;
  font-size: 13px;
}

.restriction-popover__title strong {
  color: #101828;
  font-weight: 600;
}

.restriction-popover__category + .restriction-popover__category {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eaecf0;
}

.restriction-popover__category-name {
  display: block;
  margin-bottom: 6px;
  color: #475467;
  font-size: 12px;
  font-weight: 600;
}

.restriction-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: #667085;
  font-size: 12px;
}

.restriction-option__box {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid #98a2b3;
  border-radius: 3px;
}

.restriction-option--selected {
  color: #101828;
  font-weight: 600;
}

/* The checkmark is an SVG centered as a background, so it stays centered whatever the site's box-sizing or font. */
.restriction-option--selected .restriction-option__box {
  border-color: #0d6efd;
  background: #0d6efd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.9 8.5 9.5 3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

.restriction-popover__empty {
  margin: 0;
  color: #667085;
  font-size: 12px;
}

.restriction-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}