:root {
    --primary-blue: #004d99; 
    --hover-bg: #f0f4ff;     
    --text-inactive: #00275C; 
    --text-gray: #6B7280;    
    --border-color: #E5E7EB; 
    --active-text: #ffffff;  
    --active-bg: #004d99;    
}


.table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
}

.table thead tr {
/* display: flex; */
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
border-radius: 20px 20px 0 0;
border-bottom: 1px solid #F3F4F6;
}

.table thead tr th {
padding: 10px 20px;
color: var(--Text-Caption, #6B7280);
/* Text sm/Regular */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-sm, 14px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}

.table tbody td,
.table tfoot td {
/* display: flex; */
padding: 20px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid #F3F4F6;

color: var(--Text-Body, #030712);
/* Text md/Regular */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-md, 16px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.table tbody tr:nth-child(odd) {
border-bottom: 1px solid var(--Gray-100, #F3F4F6);
}

.table tbody tr:nth-child(even) {
border-bottom: 1px solid var(--Gray-100, #F3F4F6);
background: rgba(249, 250, 251, 0.50);
}


/* dropdown action */

.actions-cell {
    overflow: visible; 
    padding: 0; 
    text-align: right !important; 
}

.actions-dropdown-toggle {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    line-height: 1; 
    transition: background-color 0.2s;
    border-radius: 4px;
    cursor: pointer;
}

.actions-dropdown-menu {
    position: absolute; 
    top: 100%; 
    margin-top: 5px; 
    z-index: 9999;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    padding: 8px 0;
    min-width: 200px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    display: none; 
}

.dropdown.show .actions-dropdown-menu {
    display: block;
}

.actions-dropdown-menu .dropdown-item {
    display: flex; 
    align-items: center;
    gap: 12px; 
    padding: 10px 16px;
    color: var(--Text-Body, #030712);
    font-size: var(--Typeface-Size-md, 16px);
    font-weight: 400;
    line-height: 150%; 
}

.actions-dropdown-menu .dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.actions-dropdown-menu .dropdown-item:disabled:hover {
    background: none;
    color: var(--Text-Body, #030712);
}

/* Ensure dropdown appears above table elements */
.table-responsive, 
.table { 
    overflow: visible !important;
}

/* status */
.status{
display: flex;
height: 26px;
padding: 8px 8px 8px 4px;
justify-content: center;
align-items: center;
gap: 4px;

}
.inprogress{
border-radius: 96px;
background: var(--Orange-50, #FFF7ED);

color: var(--Orange-500, #F97316);
text-align: center;
/* Text sm/Medium */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-sm, 14px);
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
}

.entered{
border-radius: 96px;
background: #EFF6FF;

color: var(--Orange-500, #3B82F6);
text-align: center;
/* Text sm/Medium */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-sm, 14px);
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
}
.completed{
border-radius: 96px;
background: #F0FDF4;
color:  #22C55E;
text-align: center;
/* Text sm/Medium */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-sm, 14px);
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
}

.vb{
border-radius: 96px;
background:  #FFF7ED;
color: #EA580C;
text-align: center;
/* Text sm/Medium */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-sm, 14px);
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
}

.archived{
border-radius: 96px;
background:  #FEF2F2;
color:  #EF4444;
text-align: center;
/* Text sm/Medium */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-sm, 14px);
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
}


/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.page-item-icon .page-link-icon,
.page-link-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: 37px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--Primary-950, #00275C);
    background: var(--White, #FFF);
    color: var(--Primary-950, #00275C);
    text-align: center;

    font-family: var(--font-family-base);
    font-size: var(--Typeface-Size-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-item-btn .page-link-btn,
.page-link-btn, .page-link, .page-item .page-link {
    display: flex;
    height: 37px;
    min-width: 37px;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: var(--Primary-50, #F2F5F8);
    color: var(--Primary-950, #00275C);
    text-align: center;

    font-family: var(--font-family-base);
    font-size: var(--Typeface-Size-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* --- Page active --- */
.page-item-btn.active .page-link-btn, .page-item.active .page-link {
    background: var(--Primary-950, #00275C);
    border: 1px solid var(--Primary-950, #00275C);
    color: var(--White, #FFF);
}

.page-item-icon.disabled .page-link-icon,
.page-item-btn.disabled .page-link-btn, .page-item.disabled .page-link {
    pointer-events: none;
    opacity: 0.6;
    color: var(--Gray-500, #6B7280);
    text-align: center;
    /* Text sm/Medium */
    font-family: var(--font-family-base);
    font-size: var(--Typeface-Size-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #E5E7EB);      
}

.page-item-icon.disabled .page-link-icon svg path,
.page-item-btn.disabled .page-link-btn svg path, .page-item.disabled .page-link svg path {
    fill: #6B7280;
}

.page-item-icon:not(.disabled):hover .page-link-icon,
.page-item-btn:not(.active):not(.disabled):hover .page-link-btn, .page-item:not(.active):not(.disabled):hover .page-link {
    background: var(--Primary-950, #00275C);
    color: var(--White, #FFF);
    border: 1px solid var(--Primary-950, #00275C);
}

.page-link-icon svg path,
.page-link-btn svg path {
    fill: currentColor;
}

.page-link-btn.pgn {
    cursor: default;
    background: none;
    border: none;
    color: var(--Gray-400, #9CA3AF);
}


/* Result */

.table-results tbody {
/* display: flex; */
align-items: flex-start;
gap: 1px;
align-self: stretch;
}

.table-results tbody td,
.table-results tfoot td {
/* display: flex; */
padding: 5px 20px;
justify-content: space-between;
align-items: center;
align-self: stretch;
/* border-bottom: 1px solid #F3F4F6; */

color: var(--Text-Body, #030712);
/* Text md/Regular */
font-family: var(--font-family-base);
font-size: var(--Typeface-Size-md, 16px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.table-results tbody tfoot tr td {
    border-top: 1px solid #e0e0e0 !important;
}

/* Enlève ou réduit l’espace à gauche des résultats */
.result .content{
    padding-left: 8px; /* Ajuste selon ton goût */
}

/* Si tu veux carrément coller à gauche */
.result .content{
    padding-left: 0;
}