﻿.sync-paginator {
    gap: 6px;
    font-size: 13px;
}

/* "44 items" box */
.paginator-box {
    padding: 4px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    color: #495057;
    font-size: 13px;
}

/* Buttons */
.paginator-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #6c757d;
    transition: background-color 0.15s ease;
}

    /* Hover */
    .paginator-btn:hover:not(:disabled) {
        background-color: #f8f9fa;
    }

    /* Disabled */
    .paginator-btn:disabled {
        opacity: 0.45;
        cursor: default;
    }

/* Page text */
.paginator-text {
    padding: 0 6px;
    /*color: #495057;*/
    color: #080808 ;
    font-size: 14px;
    font-weight: bolder;
}

/* 🔥 ICON TUNING (this is the secret sauce) */
.paginator-btn i {
    font-size: 12px; /* smaller = lighter look */
    line-height: 1;
    transform: translateY(0.5px); /* vertical optical alignment */
}

/* Double arrows slightly tighter */
.paginator-btn .bi-chevron-double-left,
.paginator-btn .bi-chevron-double-right {
    font-size: 11px;
}

.icon {
    /*width: 12px;
    height: 12px;
    stroke: none;*/
    /*stroke-width: 1.1;*/ /* 🔥 THIS controls thickness */
    /*fill: #6c757d;*/
    /*stroke-linecap: round;
    stroke-linejoin: round;*/
    width: 10px; /* 🔥 smaller than before */
    height: 10px;
    stroke: none;
    /*fill: #212529;*/
    fill: #313131;
    transform: translateY(0.5px);
}

/* Disabled buttons */
.qg-btn:disabled .icon {
    fill: #adb5bd; /* Bootstrap disabled tone */
}

/* Slight optical centering */
.paginator-btn svg {
    transform: translateY(0.5px);
}

.qg-paginator {
    gap: 6px;
    font-size: 13px;
    color: #212529;
}

/* "44 items" */
.qg-items {
    padding: 3px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 400;
}

/* Page text */
.qg-page {
    padding: 0 6px;
    color: #495057;
}

/* Buttons */
.qg-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    /* Hover (matches QuickGrid feel) */
    .qg-btn:hover:not(:disabled) {
        background-color: #f8f9fa;
    }

    /* Active press feel */
    .qg-btn:active:not(:disabled) {
        background-color: #e9ecef;
    }

    /* Disabled */
    .qg-btn:disabled {
        opacity: 0.45;
        cursor: default;
    }

    /* SVG icons */
    .qg-btn svg {
        width: 12px;
        height: 12px;
        /*stroke: #6c757d;
        stroke-width: 1.5;*/
        stroke: none;
        /*fill: none;*/
        /*fill: #212529;*/
        fill: #313131;
        /*stroke-linecap: round;
        stroke-linejoin: round;*/
        transform: translateY(0.5px); /* optical centering */
    }

/* Double arrows slightly tighter */
.qg-btn svg path[d*="M11"] {
    stroke-width: 1.4;
}
.qg-bold {
    font-weight: 600; /* slightly less aggressive than bold */
}