:root {

    --ag-primary: #6d5df9;
    --ag-primary-hover: #5a4be0;
    --ag-primary-light: rgba(109, 93, 249, 0.08);

    --ag-bg: #ffffff;
    --ag-bg-soft: #f8f9fc;

    --ag-border: #e5e7eb;

    --ag-text: #1e1e2e;
    --ag-text-muted: #6b7280;

    --ag-success: #10b981;
    --ag-danger: #ef4444;
    --ag-warning: #f59e0b;
    --ag-info: #3b82f6;

    --ag-radius: 12px;
    --ag-radius-sm: 8px;

    --ag-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 1px 2px rgba(16, 24, 40, .04);

    --ag-shadow-md:
        0 4px 12px rgba(16, 24, 40, .08),
        0 2px 4px rgba(16, 24, 40, .04);

    --ag-shadow-lg:
        0 12px 32px rgba(16, 24, 40, .12);

    --ag-font:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

.artigrid-container {

    font-family: var(--ag-font);

    background: var(--ag-bg);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius);

    box-shadow: var(--ag-shadow);

    overflow: hidden;

    transition:
        box-shadow .2s ease,
        border-color .2s ease;
}

.artigrid-container:hover {

    border-color: #dfe2ea;

    box-shadow: var(--ag-shadow-md);
}

.artigrid-container a {
    text-decoration: none;
}

.artigrid-container .card-header {

    background: var(--ag-bg);

    border-bottom: 1px solid var(--ag-border) !important;

    padding: 1.1rem 1.25rem;
}

.artigrid-search,
.artigrid-search-col,
.artigrid-search-col-input {

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius-sm);

    color: var(--ag-text);

    font-size: .85rem;

    padding-left: 1rem;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.artigrid-search::placeholder,
.artigrid-search-col-input::placeholder {

    color: #9ca3af;
}

.artigrid-search:hover,
.artigrid-search-col-input:hover {

    border-color: #d1d5db;
}

.artigrid-search:focus,
.artigrid-search-col-input:focus {

    background: var(--ag-bg);

    border-color: var(--ag-primary);

    box-shadow:
        0 0 0 3px var(--ag-primary-light);

    outline: none;
}

.artigrid-table {

    border-collapse: separate;

    border-spacing: 0;

    background: var(--ag-bg);
}

.artigrid-table thead th {

    background: var(--ag-bg-soft);

    font-weight: 600;

    font-size: .72rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    color: var(--ag-text-muted);

    border-bottom: 1px solid var(--ag-border);

    padding: .85rem 1rem;

    white-space: nowrap;
}

.artigrid-table tbody tr {

    background: var(--ag-bg);

    transition:
        background .12s ease;
}

.artigrid-table tbody tr:hover {

    background: var(--ag-bg-soft);

    transform: none;
}

.artigrid-table td {

    font-size: .85rem;

    color: var(--ag-text);

    border-top: 1px solid var(--ag-border);

    padding: .75rem 1rem;

    white-space: nowrap;

    vertical-align: middle;
}

.artigrid-table .btn {

    border-radius: var(--ag-radius-sm);

    font-weight: 500;

    font-size: .78rem;

    padding: .35rem .65rem;

    border: 1px solid currentColor !important;

    box-shadow: none !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.artigrid-table .btn-primary {

    border-color: rgba(109, 93, 249, .45) !important;
}

.artigrid-table .btn-primary:hover {

    border-color: var(--ag-primary) !important;

    transform: translateY(-1px);
}

.artigrid-table .btn-info {

    border-color: rgba(59, 130, 246, .4) !important;
}

.artigrid-table .btn-warning {

    border-color: rgba(245, 158, 11, .45) !important;
}

.artigrid-table .btn-danger {

    border-color: rgba(239, 68, 68, .4) !important;
}

.artigrid-table .btn-light {

    color: var(--ag-text-muted) !important;

    border-color: var(--ag-border) !important;

    background: transparent !important;
}

.artigrid-table .btn-light:hover {

    background: var(--ag-bg-soft) !important;

    color: var(--ag-text) !important;

    border-color: #d1d5db !important;

    transform: translateY(-1px);
}

.artigrid-table .btn:active {

    transform: translateY(0);
}


.artigrid-add-btn,
.artigrid-container .card-header .btn-primary {

    background: var(--ag-primary) !important;

    border: 1px solid var(--ag-primary) !important;

    color: #fff !important;

    border-radius: var(--ag-radius-sm);

    font-weight: 500;

    font-size: .8rem;

    padding: .4rem .75rem;

    box-shadow: none;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.artigrid-add-btn:hover,
.artigrid-container .card-header .btn-primary:hover {

    background: var(--ag-primary-hover) !important;

    border-color: var(--ag-primary-hover) !important;

    color: #fff !important;

    transform: translateY(-1px);

    box-shadow: var(--ag-shadow-md);
}

.artigrid-container .card-header .btn {

    border-radius: var(--ag-radius-sm);

    font-weight: 500;

    font-size: .8rem;

    padding: .4rem .75rem;

    box-shadow: none;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.artigrid-table .artigrid-row:hover td.artigrid-buttons-actions {

    position: sticky;

    right: 0;

    background: transparent;

    box-shadow:
        -6px 0 12px rgba(16, 24, 40, .04);
}

.artigrid-pagination .page-link {

    border: none;

    margin: 0 .2rem;

    border-radius: var(--ag-radius-sm);

    font-size: .78rem;

    font-weight: 500;

    color: var(--ag-text-muted);

    background: transparent;

    transition:
        background .15s ease,
        color .15s ease;
}

.artigrid-pagination .page-link:hover {

    background: var(--ag-primary-light);

    color: var(--ag-primary);
}

.artigrid-pagination .page-item.active .page-link {

    background: var(--ag-primary);

    color: #fff;

    box-shadow: var(--ag-shadow);
}

.dropdown-custom {

    position: relative;

    display: inline-block;
}

.dropdown-menu-custom {

    display: none;

    position: absolute;

    right: 0;

    top: calc(100% + 5px);

    background: var(--ag-bg);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius-sm);

    padding: .35rem;

    min-width: 150px;

    box-shadow: var(--ag-shadow-lg);

    list-style: none;

    z-index: 999;
}

.dropdown-menu-custom.show {

    display: block;
}

.dropdown-menu-custom li button {

    width: 100%;

    padding: .45rem .7rem;

    text-align: left;

    border: none;

    border-radius: 6px;

    background: transparent;

    color: var(--ag-text);

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.dropdown-menu-custom li button:hover {

    background: var(--ag-primary-light);

    color: var(--ag-primary);
}

.artigrid-summary-row td {

    background: var(--ag-bg-soft);

    border-top: 1px solid var(--ag-border);

    padding: 8px;

    font-size: .85rem;
}

.artigrid-summary-row .summary-label {

    color: var(--ag-text-muted);
}

.artigrid-summary-row .summary-op {

    display: inline-block;

    white-space: nowrap;
}


.artigrid-cards-wrapper .card,
.artigrid-table tr {

    border-radius: var(--ag-radius) !important;
}


.artigrid-add-form .form-control,
.artigrid-edit-form .form-control,
.artigrid-add-form .form-select,
.artigrid-edit-form .form-select {

    border-radius: var(--ag-radius-sm);

    border: 1px solid var(--ag-border);

    font-size: .85rem;

    padding: .55rem .8rem;

    color: var(--ag-text);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.artigrid-add-form .form-control:focus,
.artigrid-edit-form .form-control:focus,
.artigrid-add-form .form-select:focus,
.artigrid-edit-form .form-select:focus {

    border-color: var(--ag-primary);

    box-shadow:
        0 0 0 3px var(--ag-primary-light);

    outline: none;
}

.artigrid-add-form .form-label,
.artigrid-edit-form .form-label {

    font-size: .78rem;

    font-weight: 600;

    color: var(--ag-text-muted);

    margin-bottom: .35rem;
}

.form-control-sm {

    max-width: 100%;

    min-width: 200px;
}


.modal-content {

    border-radius: var(--ag-radius) !important;

    border: none !important;

    box-shadow: var(--ag-shadow-lg) !important;
}

.modal-header {

    border-bottom: 1px solid var(--ag-border) !important;

    padding: 1.25rem !important;
}


body > .modal + .modal {

    z-index: 1090 !important;
}

body > .modal-backdrop + .modal-backdrop {

    z-index: 1080 !important;
}

.artigrid-spinner-overlay {

    position: fixed;

    inset: 0;

    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;
}

.artigrid-spinner {

    width: 40px;

    height: 40px;

    background: none;

    border: 3px solid var(--ag-primary-light);

    border-top-color: var(--ag-primary);

    border-radius: 50%;

    animation: ag-spin .7s linear infinite;
}

@keyframes ag-spin {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 768px) {


    .artigrid-container {

        border-radius: 10px;

        box-shadow: var(--ag-shadow);
    }

    .artigrid-container .card-header {

        padding: .9rem;
    }

    .artigrid-container .card-header
    .d-flex.flex-column.flex-md-row.justify-content-between {

        flex-wrap: wrap;
    }


    .artigrid-container .card-header .artigrid-search,
    .artigrid-container .card-header .artigrid-search-col {

        max-width: 100% !important;

        width: 100% !important;

        flex: 1 1 100%;
    }

    .artigrid-container .card-header > div > div:first-child {

        width: 100%;
    }

    .artigrid-container .card-header
    .d-flex.justify-content-end {

        width: 100%;

        justify-content: stretch !important;

        flex-wrap: wrap;

        gap: .5rem;
    }

    .artigrid-container .card-header
    .d-flex.justify-content-end > * {

        flex: 1 1 0;

        min-width: 44px;
    }

    .artigrid-container .card-header
    .artigrid-add-btn,
    .artigrid-container .card-header
    .d-flex.justify-content-end .btn {

        width: auto;

        white-space: nowrap;

        text-align: center;
    }

    .artigrid-container .table-responsive {

        overflow-x: visible;
    }

    .artigrid-table {

        width: 100%;
    }


    .artigrid-table thead {

        display: none;
    }


    .artigrid-table,
    .artigrid-table tbody,
    .artigrid-table tr,
    .artigrid-table td {

        display: block;

        width: 100%;
    }


    .artigrid-table tr {

        background: var(--ag-bg);

        border: 1px solid var(--ag-border);

        border-radius: var(--ag-radius) !important;

        margin: 0 .65rem .75rem;

        padding: .75rem 1rem;

        box-shadow: var(--ag-shadow);

        transition:
            border-color .15s ease,
            box-shadow .15s ease;
    }

    .artigrid-table tr:hover {

        background: var(--ag-bg);

        border-color: #d9dcef;

        box-shadow: var(--ag-shadow-md);

        transform: none;
    }


    .artigrid-table td {

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 36px;

        border-top: none;

        border-bottom: 1px solid rgba(229, 231, 235, .7);

        padding: .45rem 0;

        white-space: normal;

        text-align: right !important;

        font-size: .83rem;

        color: var(--ag-text);
    }

    .artigrid-table td:last-child {

        border-bottom: none;
    }

    .artigrid-table td[data-label]::before {

        content: attr(data-label);

        display: block;

        flex: 0 0 38%;

        margin-right: .75rem;

        font-size: .68rem;

        font-weight: 600;

        letter-spacing: .04em;

        text-transform: uppercase;

        color: var(--ag-text-muted);

        text-align: left;
    }

    .artigrid-table
    td:first-child:has(input[type="checkbox"]) {

        justify-content: flex-end;

        padding-bottom: .25rem;

        border-bottom: none;
    }

    .artigrid-table
    td.artigrid-buttons-actions {

        position: static !important;

        display: flex !important;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: .4rem;

        margin-top: .5rem;

        padding-top: .65rem;

        border-top: 1px solid var(--ag-border);

        border-bottom: none;

        box-shadow: none;
    }

    .artigrid-table
    td.artigrid-buttons-actions::before {

        content: none;
    }

    .artigrid-table
    td.artigrid-buttons-actions .btn {

        flex: 0 0 auto;

        box-shadow: none !important;
    }

    .artigrid-container .table {

        font-size: 13px;
    }

    .artigrid-container th,
    .artigrid-container td {

        white-space: normal;
    }
}