table {
width: 100%;
border-collapse: collapse;
background: transparent;
padding-top: var(--space-s);
color: var(--primary-d-2);
table-layout: fixed;
background-color: #00790f;
}

/* header */
thead th {
text-align: left;
padding: var(--space-xs) 1rem;
font-weight: 600;
font-size: var(--text-m);
border-bottom: 1px solid #fff;
color: #00790f;
background-color: #fff;

}

/* rows */
tbody tr {
border-bottom: 1px solid #fff;
}

tbody td {
padding: var(--space-2xs) 1rem;
vertical-align: middle;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}

/* Set column widths according to requested percentages */
colgroup col:nth-child(1) { width: 23%; }
colgroup col:nth-child(2) { width: 8%; }
colgroup col:nth-child(3) { width: auto; } /* takes remaining space */
colgroup col:nth-child(4) { width: 16%; }

/* Type cell (icon + label) */
tbody td.type-icon {
text-align: left;
font-weight: 700;
font-size: var(--text-l);

align-items: center;
gap: 0.5rem;
white-space: nowrap;
}

/* Icon rules (usein HTML) */
.type-icon-img {
width: 80px;
height: auto;
display: inline-block;
flex: 0 0 80px;
object-fit: contain;
vertical-align: middle;
}

/* class number and fare styling */
tbody td.class-number,
tbody td.fare {
font-weight: 700;
font-size: var(--text-xl);
}

tbody td.class-number {
color: var(--tertiary);
}
/* description */
tbody td.description {;
white-space: normal;
word-break: break-word;
}

/* fare column desktop behaviour */
tbody td.fare {
text-align: left; /* desktop left align */
white-space: nowrap;
}

/* Responsive: mobile stacked cards */
@media (max-width: 767px) {
table, thead, tbody, th, td, tr {
display: block;
width: 100%;
}
thead tr { display: none; }

tbody tr {
margin-bottom: 1rem;
border-bottom: 2px solid #fff;
padding-bottom: 1rem;
}

tbody td {
/* stack: label on left, value on right */
text-align: right;
padding-left: 30%;
position: relative;
border-bottom: none;
font-size: var(--text-m);
width: auto; /* reset widths */
white-space: normal;
}

tbody td::before {
content: attr(data-label);
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
width: 25%;
text-align: left;
white-space: nowrap;
font-size: var(--text-m);
overflow: hidden;
text-overflow: ellipsis;
color:#fff;
}

/* type icon: keep image and label stacked on the right, but show label via ::before */
tbody td.type-icon {
text-align: right;
padding-left: 50%;
white-space: normal;
}


/* ensure icon sits to the right of the label area */
tbody td.type-icon .type-icon-img {
right: 0.75rem;
top: 50%;
flex: none;
}

tbody td.class-number,
tbody td.fare {
font-size: var(--text-xl);
font-weight: 700;
white-space: normal;
padding-left: 70%;
}

tbody td.fare {
text-align: right; /* mobile fare column right align */
}
}