/* 1. Container & Font Settings */
.financial-report table {
    width: 100%;
    border-collapse: collapse; /* Essential for the grid lines to merge */
    background: #ffffff;
    font-family: 'OpenSans-Regular', Arial, sans-serif;
    font-size: 13px;
    color: #000;
}

/* 2. THE GRID BORDERS (The core request) */
/* Apply a light gray border to every cell to create the grid effect */
.financial-report td {
    border: 1px solid #e5e5e5; /* The specific light gray from the Nokia screenshot */
    padding: 12px 10px !important; /* Generous spacing like the image */
    vertical-align: middle;
    line-height: 1.4;
    color: #000;
}

/* Remove default paragraph margins so alignment works */
.financial-report td p {
    margin: 0;
    padding: 0;
}

/* 3. Column Alignment */
/* First column (Labels) - Left Aligned */
.financial-report tr td:first-child,
.financial-report tr td:first-child p {
    text-align: left !important;
}

/* Data columns - Right Aligned (Standard for finance) */
.financial-report tr td:not(:first-child),
.financial-report tr td:not(:first-child) p {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 4. HEADER STYLING (The Black Lines) */
/* Your HTML has 3 rows of headers. We target them to look like the Nokia Header. */

/* The top border of the first header row */
.financial-report tr:nth-child(1) td {
    border-top: 1px solid #000; /* Thick black line top */
}

/* The bottom border of the specific "Years" row (Row 3) */
.financial-report tr:nth-child(3) td {
    border-bottom: 2px solid #000; /* Thick black line bottom */
    font-weight: bold;
    background-color: #fff; /* Ensure it stays white */
}

/* Bold the text in the header rows */
.financial-report tr:nth-child(-n+3) td p {
    font-weight: bold;
    text-align: center !important; /* Center the headers */
}

/* 5. ZEBRA STRIPING (Subtle) */
/* The screenshot shows very subtle alternating row colors */
.financial-report tbody tr:nth-child(even) td {
    background-color: #fafafa; /* Very faint gray */
}

/* 6. Highlighting Specific Columns (Optional based on image) */
/* In the screenshot, the "Q4'25" and "Q1-Q4'25" columns have bold data. 
   This targets the 2nd and 5th columns to make them bold. */
.financial-report tr td:nth-child(2) p,
.financial-report tr td:nth-child(5) p {
    font-weight: 700;
}

/* 7. Hide the Spacer Row */
.financial-report tr:nth-child(4) {
    display: none;
}

/* 8. MOBILE RESPONSIVENESS */
@media screen and (max-width: 992px) {
    .financial-report {
        overflow-x: auto;
        display: block;
    }
    
    .financial-report table {
        min-width: 700px; /* Force scroll instead of breaking layout */
    }

    /* Remove specific column widths from original CSS to allow flex */
    .column1, .column2, .column3, .column4, .column5 {
        width: auto !important;
        padding-left: 10px !important;
        margin-left: 0 !important;
    }
    
    /* Ensure content isn't hidden */
    .financial-report tbody tr td:before {
        display: none !important;
    }
}