/*
   Important Note: This CSS assumes it will be integrated into an existing HTML file.
   It does NOT include body or root-level styling, assuming your main application
   already handles that.
*/

.chevron-table-simplified {
    border-collapse: collapse; /* Crucial for seamless borders */
    width: 90%; /* Adjust as needed for your layout */
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #fff;
    /*table-layout: fixed; /* Helps with consistent column widths */
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Applied to table for consistency */
    margin: 20px auto; /* Center the table if it's the only element, or adjust for your layout */
}

    .chevron-table-simplified tr {
        height: 80px; /* Consistent height for each row */
        position: relative; /* For z-index to work between rows */
        margin-top: -1px; /* Overlap borders slightly for seamless look */
        /* For the downward-pointing arrow to overlap correctly, the
       next row (visually below it) needs to be pulled up.
       Since HTML rows render top-to-bottom, we need to pull the
       current row's bottom over the next row's top.
       This is tricky with standard table layout, so we'll rely on
       z-index and the arrow div's positioning.
    */
    }

.content-cell-first {
    /*width: calc(100% - 160px); /* Adjust width to make space for arrow-cell */
    padding: 1px 10px;
    background-color: #fff;
    border-right: 1px solid #ddd; /* Separator line */
    text-align: left;
    vertical-align: middle; /* Vertically align content */
}

.content-cell {
    /*width: calc(100% - 160px); /* Adjust width to make space for arrow-cell */
    padding: 1px 10px;
    background-color: #fff;
    border-right: 1px solid #ddd; /* Separator line */
    text-align: center;
    vertical-align: middle; /* Vertically align content */
}


/* --- Arrow Cell Styling (the container for the downward arrow div) --- */
.arrow-cell {
    width: 80px; /* Fixed width for the arrow column */
    background-color: transparent; /* No background, the arrow-div handles color */
    padding: 0; /* Remove default cell padding */
    vertical-align: top; /* Align arrow div to the top of the cell */
    text-align: center;
    position: relative; /* Crucial for positioning the arrow-div accurately */
    overflow: hidden; /* Important to clip the arrow's point if it extends */
    /*height: 100%; /* Ensure cell takes full row height */
}

/* --- The Downward Arrow DIV Styling --- */
.arrow-up-div { /* Renamed for consistency, but styling for DOWNWARD */
    width: 100%; /* Take full width of its parent cell */
    height: 100%; /* Take full height of its parent cell */
    font-weight: bold;
    font-size: 1.2em;
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    box-sizing: border-box; /* Include padding in width/height */
    position: absolute; /* Position within the arrow-cell */
    top: 0;
    left: 0;
    z-index: 2; /* Ensure arrow is above content of next row if they overlap */
    /* CORRECTED clip-path for a DOWNWARD pointing arrow (as in image_957465.png) */
    /* This polygon creates a shape where the top edge comes to a central point.
       0% 20px (top-left, but 20px down from top edge to create the cut)
       50% 0% (exact top-center point)
       100% 20px (top-right, but 20px down from top)
       100% 100% (bottom-right)
       0% 100% (bottom-left)
    */
    clip-path: polygon(0% 20px, 50% 0%, 100% 20px, 100% 100%, 0% 100%);
}

 

/* Special styling for the very first row in HTML (visually the top-most category, C) */
.chevron-table-simplified tr:first-child .arrow-up-div {
    /* For the top-most arrow, its top edge should be flat, not pointed. */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Make it a flat rectangle */
}

/* Adjust margin for all rows except the last one in HTML (visually the bottom-most)
   to create overlap with the next row's arrow.
   The negative margin should be equal to the height of the arrow's "point" from the top.
*/
.chevron-table-simplified tr:not(:last-child) {
    margin-bottom: -20px; /* Pulls the next row up for overlap */
}

/* Make sure the last row in HTML (visually the bottom-most) doesn't have a negative margin */
.chevron-table-simplified tr:last-child {
    margin-bottom: 0;
}

/* Ensure the text inside the arrow is vertically centered */
.arrow-up-div span {
    line-height: 1; /* Helps with centering */
}