/* ============================================================
   TI-Score Extension Styles
   ============================================================ */

/* --- Grade colour tokens ----------------------------------- */
:root {
  --tis-grade-a: #00ff64;
  --tis-grade-b: #b3f119;
  --tis-grade-c: #efec00;
  --tis-grade-d: #f3b81f;
  --tis-grade-e: #f89100;
  --tis-grey-border: #e0e0e0;
  --tis-grey-light: #f4f4f4;
  --tis-scope-bg: #010e52;
  --tis-scope-text: #fff;
  --tis-text: #1a1a1a;
  --tis-text-muted: #666;
}

/* ============================================================
   Layout
   ============================================================ */
.tx_gemapraxissoftware.gema_tiscore {
  @media (min-width: 991.5px) {
    padding-top: 118px;
  }

  @media (min-width: 1409.5px) {
    padding-top: 150px;
  }
}

.gema_tiscore .nice-select .current {
  line-height: 1.5;
  width: calc(100% - 10px);
}

.tx_gemapraxissoftware .gps-list .search-list__item.manufacturer:nth-child(2n) article {
  background-color: #f2f3f7;
  border-color: #f2f3f7;
}

/* ============================================================
   Product list
   ============================================================ */
.tis-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

/* ============================================================
   Card
   ============================================================ */
article {
  position: relative;
}

article>.tis-card__grade {
  border-bottom-left-radius: 26px;
  border-top-left-radius: 26px;
}

.tis-card {
  align-items: stretch;
  background: transparent !important;
  border: 0 none;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.tis-card span {
  font-family: apercu-bold, sans-serif !important;
  font-size: 18px;
  font-weight: 400;
}

/* Grade sidebar */
.tis-card__grade {
  align-items: center;
  background: var(--tis-grey-light);
  display: flex;
  flex-shrink: 0;
  height: calc(100% + 8px);
  justify-content: center;
  margin: -4px;
  position: absolute;
  width: 48px;
}

.tis-card--a .tis-card__grade,
.tis-card__grade.tis-card__grade--a {
  background: var(--tis-grade-a);
}

.tis-card--b .tis-card__grade,
.tis-card__grade.tis-card__grade--b {
  background: var(--tis-grade-b);
}

.tis-card--c .tis-card__grade,
.tis-card__grade.tis-card__grade--c {
  background: var(--tis-grade-c);
}

.tis-card--d .tis-card__grade,
.tis-card__grade.tis-card__grade--d {
  background: var(--tis-grade-d);
}

.tis-card--e .tis-card__grade,
.tis-card__grade.tis-card__grade--e {
  background: var(--tis-grade-e);
}

.tis-card__grade-letter {
  color: #fff;
  font-family: apercu-bold, sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
}

.tis-card .search-list__main {
  margin-left: 44px;
}

/* Card body */
.tis-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 14px;
}

/* Header row */
.tis-card__header {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.tis-card__title-group {
  display: flex;
  flex-direction: column;
}

.tis-card__title {
  color: var(--tis-text);
  font-size: 1rem;
  line-height: 1.3;
}

.tis-card__vendor {
  color: var(--tis-text-muted);
  font-weight: 500;
}

.tis-card__meta {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.tis-card__scope-badge {
  border-radius: 3px;
  font-family: euclid-bold, sans-serif !important;
  padding: 2px 8px;
  white-space: nowrap;
}

.tis-card__ext-link {
  align-items: center;
  color: var(--tis-text-muted);
  display: flex;
}

.tis-card__ext-link:hover {
  color: var(--tis-scope-bg);
}

/* Scores row */
.tis-card__scores,
.tis-card__features {
  align-items: center;
  gap: 6px;
}

.tis-card__label {
  color: var(--tis-text-muted);
  white-space: nowrap;
}

/* Arrow link */
.tis-card__arrow {
  align-items: center;
  background: var(--tis-scope-bg);
  border-bottom-right-radius: 26px;
  border-top-right-radius: 26px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 1.4rem;
  height: 150px;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease;
  width: 36px;

  @media screen and (max-width: 576px) {
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
    border-top-right-radius: 0;
    height: auto;
    margin: 0 auto;
    width: 150px;
  }
}

.tis-card__arrow svg {
  stroke: #ffffff;
}

.tis-card__arrow:hover {
  background: #002a6b;
  color: #fff;
}

/* ============================================================
   Application type badges
   ============================================================ */
.tis-app-badge__grade {
  align-items: center;
  background: var(--tis-grey-light);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-family: apercu-bold, sans-serif;
  font-size: 0.7rem;
  height: 20px;
  justify-content: center;
  text-transform: uppercase;
  width: 20px;
}

.tis-app-badge--a .tis-app-badge__grade {
  background: var(--tis-grade-a);
}

.tis-app-badge--b .tis-app-badge__grade {
  background: var(--tis-grade-b);
}

.tis-app-badge--c .tis-app-badge__grade {
  background: var(--tis-grade-c);
}

.tis-app-badge--d .tis-app-badge__grade {
  background: var(--tis-grade-d);
}

.tis-app-badge--e .tis-app-badge__grade {
  background: var(--tis-grade-e);
}

/* ============================================================
   Feature badges
   ============================================================ */
.tis-feature-badge {
  align-items: center;
  display: inline-flex;
  font-family: apercu-bold, sans-serif !important;
  gap: 3px;
}

.tis-feature-badge__icon {
  font-size: 0.9em;
}

/* ============================================================
   Detail page
   ============================================================ */
.tis-detail__back {
  color: var(--tis-scope-bg);
  display: inline-block;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-decoration: none;
}

.tis-detail__back:hover {
  text-decoration: underline;
}

.tis-detail__grade {
  align-items: center;
  background: var(--tis-grey-light);
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.tis-detail__grade-letter {
  color: #fff;
  font-family: apercu-bold, sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
}

.tis-detail__header--a .tis-detail__grade {
  background: var(--tis-grade-a);
}

.tis-detail__header--b .tis-detail__grade {
  background: var(--tis-grade-b);
}

.tis-detail__header--c .tis-detail__grade {
  background: var(--tis-grade-c);
}

.tis-detail__header--d .tis-detail__grade {
  background: var(--tis-grade-d);
}

.tis-detail__header--e .tis-detail__grade {
  background: var(--tis-grade-e);
}

.tis-detail__title-group {
  flex: 1;
}

.tis-detail__scope-badge {
  background: var(--tis-scope-bg);
  border-radius: 3px;
  color: #fff;
  font-family: apercu-bold, sans-serif;
  font-size: 0.75rem;
  padding: 3px 10px;
}

.tis-detail__ext-link {
  color: var(--tis-scope-bg);
  font-size: 0.8rem;
}

.tis-detail__label {
  border-left: 1px solid #010e52;
  font-family: apercu-bold, sans-serif !important;
}

.tis-detail__app {
  text-align: center;
}

.tis-detail__app h3 {
  margin-bottom: 0;
}

.tis-detail__app h3 button.btn {
  transition: all 0.3s ease-in-out;
}

.tis-detail__app h3 button.btn svg {
  margin-left: 20px;
  transition: all 0.3s ease-in-out;
}

.tis-detail__app .is-open h3 button.btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
}

.tis-detail__app .is-open h3 button.btn svg {
  transform: rotate(180deg);
}


.tis-detail__app .is-open>div {
  background-color: #f2f3f7;
  border-radius: 26px;
  margin-top: -10px;
  position: relative;
  z-index: 2;
}

/* Sections */
.tis-detail__section hr {
  margin: 5rem 0;
}

/* Application blocks */
.tis-detail__app-grade {
  align-items: center;
  background: #aaa;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-family: apercu-bold, sans-serif;
  font-size: 0.85rem;
  height: 28px;
  justify-content: center;
  text-transform: uppercase;
  width: 28px;
}

.tis-detail__app--a .tis-detail__app-grade {
  background: var(--tis-grade-a);
}

.tis-detail__app--b .tis-detail__app-grade {
  background: var(--tis-grade-b);
}

.tis-detail__app--c .tis-detail__app-grade {
  background: var(--tis-grade-c);
}

.tis-detail__app--d .tis-detail__app-grade {
  background: var(--tis-grade-d);
}

.tis-detail__app--e .tis-detail__app-grade {
  background: var(--tis-grade-e);
}

.tis-detail__app-name {
  color: var(--tis-text);
  flex: 1;
  font-family: apercu-bold, sans-serif;
  font-size: 0.95rem;
}

.tis-detail__app-score {
  color: var(--tis-text-muted);
  font-size: 0.85rem;
}

.tis-badge--warning {
  background: #FFF3CD;
  border: 1px solid #FFEEBA;
  border-radius: 3px;
  color: #856404;
  font-size: 0.7rem;
  padding: 2px 6px;
}

/* Criteria list */
.tis-detail__criteria-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 8px 14px;
}

.tis-detail__criterion {
  display: flex;
  gap: 10px;
  padding: 4px 0;
}

.tis-detail__criterion--no {
  opacity: 0.7;
}

.tis-detail__criterion-id {
  color: var(--tis-text-muted);
  flex-shrink: 0;
  font-size: 0.78rem;
  width: 110px;
}

/* Feature list */
.tis-detail__feature-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tis-detail__feature {
  align-items: baseline;
  border-bottom: 1px solid var(--tis-grey-border);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 30px minmax(120px, 180px) 1fr;
  padding: 0.5rem 0;
}

.tis-detail__feature:last-child {
  border-bottom: none;
}

.tis-detail__feature-icon {
  flex-shrink: 0;
  font-size: 1rem;
  text-align: center;
}

.tis-detail__feature--yes .tis-detail__feature-icon {
  color: var(--tis-grade-a);
}

.tis-detail__feature--no .tis-detail__feature-icon {
  color: var(--tis-grade-e);
}

.tis-detail__feature-title {
  font-family: apercu-bold, sans-serif;
}

/* ============================================================
   Grade bar
   ============================================================ */
.tis-grade-bar {
  display: flex;
  margin: 0 auto 1.5rem;
  width: 100%;
}

.tis-grade-bar__segment {
  align-items: center;
  color: #010e52;
  display: flex;
  flex: 1;
  font-family: apercu-bold, sans-serif;
  font-size: 1.25rem;
  height: 42px;
  justify-content: center;
  position: relative;
  text-transform: uppercase;

  @media (min-width: 768px) {
    font-size: 1.5rem;
    height: 48px;
  }

  @media (min-width: 992px) {
    font-size: 1.688rem;
    height: 52px;
  }
}

.tis-grade-bar__segment:first-child {
  border-radius: 40px 0 0 40px;
}

.tis-grade-bar__segment:last-child {
  border-radius: 0 40px 40px 0;
}

.tis-grade-bar__segment--a {
  background: #00ff65;
}

.tis-grade-bar__segment--b {
  background: #b4f11a;
}

.tis-grade-bar__segment--c {
  background: #efec01;
}

.tis-grade-bar__segment--d {
  background: #f3b81e;
}

.tis-grade-bar__segment--e {
  background: #F89100;
}

.tis-grade-bar .tis-grade-bar__segment--nodata {
  background: var(--tis-grey-border);
  border-radius: 40px;
  color: var(--tis-text-muted);
  font-family: apercu-bold, sans-serif;
  font-size: 0.875rem;
  text-transform: none;
}

.tis-grade-bar__segment--active::after {
  background: inherit;
  border: solid transparent;
  border-width: 0 12px 12px 0;
  bottom: 0;
  content: "";
  display: block;
  height: 12px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 50%) rotate(45deg) skew(8deg, 8deg);
  width: 12px;
  z-index: 1;

  @media (min-width: 768px) {
    border-width: 0 16px 16px 0;
    height: 16px;
    width: 16px;
  }

  @media (min-width: 992px) {
    border-width: 0 20px 20px 0;
    height: 20px;
    width: 20px;
  }
}

/* ============================================================
   Info modal
   ============================================================ */

.gema_tiscore .modal.show .modal-dialog {
  border-radius: 22px;
  overflow: hidden;
}

/* ============================================================
   Score label
   ============================================================ */
.tis-detail__score-label {
  align-items: flex-start;
  color: var(--tis-scope-bg);
  display: flex;
  font-size: 20px;
  gap: 0.5rem;
  justify-content: center;
  margin: 3rem 0 3.5rem;
  text-align: left;
}

.tis-detail__score-label span {
  font-family: apercu-bold, sans-serif;
}

.tis-detail__score-label svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   Criteria expandable panel
   ============================================================ */
[data-js="expandable-content"] {
  padding: 3rem;
}

/* ============================================================
   Criteria grouped list
   ============================================================ */
.tis-detail__criteria-category {
  color: var(--tis-scope-bg);
  font-family: apercu-bold, sans-serif;
  font-weight: 400;
  margin: 1.25rem 0 0.5rem;
  text-align: left;
}

.tis-detail__criteria-category:first-child {
  margin-top: 0;
}

.tis-detail__criteria-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tis-detail__criterion {
  align-items: flex-start;
  display: flex;
  gap: 0.625rem;
  padding: 0.5rem 0;
  text-align: left;
}

.tis-detail__criterion-icon {
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.tis-detail__criterion-icon svg {
  display: block;
}