/* ================================================= */
/* 1. CONTAINER & GLOBAL SCROLLING CONTROLS          */
/* (Remains the same)                                */
/* ================================================= */
.table-container {
 overflow-x: auto;
 max-width: 100%;
/* max-height: 500px; */
 overflow-y: auto;
 border-left: 1px solid #3498DB;
 border-right: 1px solid #3498DB;
 border-radius: 8px;
}

/* ================================================= */
/* 2. BASE TABLE STYLING                             */
/* (Remains the same)                                */
/* ================================================= */
.styled-table {
 width: 100%;
 border-collapse: collapse;
}

.styled-table th,
.styled-table td {
 padding: 12px 15px;
 text-align: left;
}


/* ================================================= */
/* 3. ALWAYS STICKY HEADER (Vertical Scroll)         */
/* (Remains the same)                                */
/* ================================================= */
.styled-table thead tr {
 background-color: #3498DB;
 color: #ffffff;
}

.styled-table thead th {
 position: sticky;
 top: 0;     
 z-index: 10;   
 background-color: #3498DB; 
}


/* ================================================= */
/* 4. FLEXIBLE STICKY COLUMNS (Horizontal Scroll)    */
/* (Remains the same)                                */
/* ================================================= */

/* --- First Column (Column 1) --- */
.styled-table th.sticky-col-1 {
  z-index: 12;   
  background-color: #00705a;
  left: 0;     
}
.styled-table td.sticky-col-1 {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #ffffff;
  font-weight: bold;
}

/* --- Second Column (Column 2) --- */
.styled-table th.sticky-col-2 {
  z-index: 11; 
  background-color: #00705a;
  left: 150px;
}
.styled-table td.sticky-col-2 {
  position: sticky;
  left: 150px;
  z-index: 5;
  background-color: #ffffff;
  font-weight: bold;
}

/* ================================================= */
/* 5. ZEBRA STRIPES & BORDERS                        */
/* (Remains the same)                                */
/* ================================================= */
.styled-table tbody tr {
 border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
 background-color: #f3f3f3;
}

.styled-table tbody tr:nth-of-type(even) td.sticky-col-1 {
 background-color: #dceaf2;
}
.styled-table tbody tr:nth-of-type(even) td.sticky-col-2 {
 background-color: #dceaf2;
}

.styled-table tbody tr:last-of-type {
 border-bottom: 2px solid #3498DB;
}


/* ================================================= */
/* 6. MOUSE HOVER EFFECT (NEW SECTION)               */
/* ================================================= */

/* Highlight the entire row on hover */
.styled-table tbody tr:hover {
    background-color: #dceaf2; /* A light green that complements the header color */
    cursor: pointer; /* Changes the cursor to a pointer to indicate interactivity */
}

/* Ensure the sticky cells maintain the hover highlight and z-index */
.styled-table tbody tr:hover td.sticky-col-1,
.styled-table tbody tr:hover td.sticky-col-2 {
    /* Set the background to the same hover color */
    background-color: #dceaf2; 
    /* Use a slightly higher z-index to ensure it overlaps any non-sticky background */
    z-index: 6; 
}

/* ================================================= */
/* 7. OLD TABLE CSS (HORIZONTAL SCROLL ADDED)        */
/* ================================================= */

/* সব টেবিলের জন্য অটোমেটিক হরিজন্টাল স্ক্রল */
table.tg {
    display: block;        /* টেবিলকে ব্লক লেভেলে নিয়ে আসে যেন স্ক্রল কাজ করে */
    overflow-x: auto;      /* কন্টেন্ট বেশি হলে ডানে স্ক্রলবার দেখাবে */
    max-width: 100%;       /* স্ক্রিনের বাইরে যাবে না */
    white-space: nowrap;   /* ভেতরের টেক্সট যেন ভেঙে নিচে না যায় */
    border-collapse:collapse;
    border-color:#9ABAD9;
    border: 1px solid #3498DB;
    border-spacing:0;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch; /* মোবাইলে স্মুথ স্ক্রলিংয়ের জন্য */
}

/* টেবিলটি সেন্টারে রাখার জন্য */
.center {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;    /* কন্টেন্ট অনুযায়ী সেন্টারিং ঠিক রাখে */
}

.tg td{border-color:#9ABAD9; border-style:solid; border-width:1px; color:#444; overflow:hidden; padding:10px 5px; word-break:normal;}
  
.tg th{background-color:#3498DB; border-color:#9ABAD9; border-style:solid; border-width:1px; color:#fff; font-weight:normal; overflow:hidden; padding:10px 5px; word-break:normal;}
 
.tg .tg-baqh{text-align:center; vertical-align:middle}

.tg .tg-c3ow .tg-7btt{border-color:inherit; text-align:center; vertical-align:middle}