.v2026 {

    /* Design tokens */
    --text-color:#555;
    --text-color-light:#aaa;
    --text-efty:#2176bc;
    --text-success:#31ac75;
    --border-color:#ddd;
    --border-color-light:#f2f2f2;
    --line-height:#ddd;
    --input-radius:6px;
    --button-radius:9px;
    --input-padding:12px 15px;
    --card-radius:14px;
    --bg-success:#10B981;
    --bg-success-hover:#0CAB76;
    --bg-success-light:#ecfdf3;
    --bg-success-light-hover:#d0ecdc;
    --bg-efty:#188ae2;
    --hover-light:#eee;
    --bg-efty-light:#dff0ff;
    --bg-light:#f4f4f4;
    --bg-grey:#eee;
    --btn-radius: 9999px;
    --btn-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.06);



    /* basic */
    *:not(i) {
        font-family: "Outfit", sans-serif;
        font-optical-sizing: auto;
        color:var(--text-color);
    }
    body {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
    }
    .content-page {
        background-color: #f9f9f9;
    }
    .adjust-lucide {
        position: relative;
        top: 6px;
    }



    /* Header */
    .topbar .topbar-left, .navbar-default {
        background: #fff;
        height:80px;
        box-shadow:none;
        border-bottom:1px solid var(--border-color);
    }
    .topbar .logo {
        margin-top:6px;
        margin-left:20px;
        display:block;
    }
    .topbar #logo_small span img {
        margin: 15px 0px 0px 20px;
    }
    .button-menu-mobile {
        color:var(--text-color-light);
        border:1px solid var(--border-color);
        border-radius:var(--input-radius)!important;
        padding: 9px 10px 5px 10px;
        margin-top: 18px;
    }
    .button-menu-mobile svg {
        line-height:initial;
    }
    .topbar input.mainsearcher {
        border:1px solid var(--border-color);
        border-radius:var(--input-radius)!important;
        color:var(--text-color);
        padding:var(--input-padding);
        height:auto;
        margin:17px 0 0 20px;
        padding-right:50px;
    }
    .topbar #main-search-frm a {
        color:var(--text-color-light);
        top:15px!important;
        right:15px!important;
    }
    .topbar #main-search-frm a svg {
        height:18px;
    }
    .topbar ul#top-right-togglers {
        margin: 8px 10px 0 0;
    }
    .topbar a#create-toggle {
        background-color:var(--bg-success-light)!important;
        border:1px solid var(--bg-success-light-hover)!important;
        height: 42px;
        width: 42px;
    }
     .topbar a#notification-toggle {
         background-color:transparent!important;
         border:1px solid var(--border-color)!important;
         height: 42px;
         width: 42px;
     }
    .topbar a#create-toggle:hover {
        background-color:var(--bg-success-light-hover)!important;
    }
    .topbar a#notification-toggle:hover {
        background-color:var(--hover-light)!important;
    }
    .topbar a#create-toggle i, .topbar a#notification-toggle svg {
        color:var(--text-color);
        display:block;
        margin-top: 8px;
        margin-left: 8px;
    }
    .topbar a#create-toggle svg {
        color:var(--text-success);
        display:block;
        margin-top: 8px;
        margin-left: 8px;
    }
    .notify-list svg {
        width: 20px;
        height: 20px;
    }
    .notify-list svg * {
        color:#fff;
    }
    .xs-search-toggle {
        margin-top: 20px;
    }
    .xs-search-closer{
        margin-top: 18px;
        margin-left: 15px;
    }



    /* Main content wrappers */
    .page-title-box {
        box-shadow: none;
        border-bottom:1px solid var(--border-color);
        padding:30px;
    }
    .card-box {
        box-shadow: none;
        border-radius: var(--card-radius);
        border:1px solid var(--border-color);
        padding: 20px 35px;
    }



    /* Sidebar */
    .side-menu.left {
        top:80px;
        box-shadow:none;
        border-right:1px solid var(--border-color);
    }
    .content-page .content {
        margin-top:80px;
    }
    #sidebar-menu {
        width: 92%;
        margin: 0 auto;
        padding-top: 20px;
    }
    #sidebar-menu a.subdrop {
        background-color:var(--bg-efty-light);
    }
    #sidebar-menu > ul > li > a {
        border-radius:var(--button-radius);
    }
    #sidebar-menu a.subdrop i, #sidebar-menu a.subdrop span {
        color:var(--text-efty)!important;
        font-weight: bold;
    }
    #sidebar-menu ul ul li.active a {
        color:var(--text-efty);
    }
    #sidebar-menu ul ul li.active a::before{
        content: "";
        display: inline-block;
        width: 1em;
        height: 1em;
        margin-right: .1rem;
        position: relative;
        top: 2px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center;
        background-size: contain;
        color: var(--text-efty);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center;
        -webkit-mask-size: contain;
        background-color: var(--text-efty);
    }
    #sidebar-menu ul li.active .menu-arrow::before {
        background-color: var(--text-color);
    }
    #sidebar-menu ul li .menu-arrow::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center;
        background-size: contain;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center;
        -webkit-mask-size: contain;
        background-color: var(--text-color);
    }
    #sidebar-menu li.border-top {
        border-top: 1px solid var(--border-color);
    }
    #sidebar-menu ul li a svg {
        display: inline-block;
        font-size: 22px;
        line-height: 17px;
        margin-left: 3px;
        margin-right: 15px;
        text-align: center;
        vertical-align: middle;
        width: 20px;
    }

    /* AI Button */
    /* AI button styling */
    .btn.ai-button {
        color: #fff;
        background: linear-gradient(
                135deg,
                #0f172a 0%,     /* deep blue-black */
                #1e3a8a 35%,    /* AI blue */
                #4338ca 65%,    /* indigo */
                #0ea5e9 100%    /* electric cyan accent */
        );
        border: none;
        box-shadow:
                0 0 0 1px rgba(255,255,255,0.06) inset,
                0 4px 12px rgba(14,165,233,0.25),
                0 0 24px rgba(67,56,202,0.15);
        transition: all 0.2s ease;
    }

    /* hover */
    .btn.ai-button:hover,
    .btn.ai-button:focus {
        color: #fff;
        background: linear-gradient(
                135deg,
                #020617 0%,
                #1d4ed8 40%,
                #6366f1 75%,
                #22d3ee 100%
        );
        box-shadow:
                0 0 0 1px rgba(255,255,255,0.1) inset,
                0 6px 18px rgba(34,211,238,0.35),
                0 0 32px rgba(99,102,241,0.25);
    }

    /* active */
    .btn.ai-button:active {
        color: #fff;
        transform: translateY(1px);
        box-shadow:
                0 2px 8px rgba(0,0,0,0.4),
                0 0 16px rgba(14,165,233,0.2);
    }

    .btn-group.open > .btn.ai-button,
    .btn.ai-button.active,
    .btn.ai-button:active:focus,
    .btn.ai-button:focus {
        color: #fff;
    }

    /* caret */
    .btn.ai-button .caret {
        border-top-color: #fff;
        color: #fff;
    }

    /* svg icon */
    .btn.ai-button svg {
        stroke: currentColor;
    }

    /* Onboarding widget */
    .progress-bar, .onboarding-progress {
        background-color:var(--bg-efty)!important;
    }
    .onboarding-modal .progress-bar {
        background-color:#fff!important;
        height: 6px;
        margin-top: 2px;
    }
    .onboarding-footer * {
        color:#fff;
    }


    /* Joyride */
    .joyride-content-wrapper, .joyride-content-wrapper * {
        color:#fff!important;
    }
    .joyride-next-tip {
        float:right;
        margin:10px;
    }


    /* Forms */
    select {
        border:1px solid var(--border-color);
        border-radius:var(--input-radius)!important;
        color:var(--text-color);
        padding:var(--input-padding);
        height:auto;
    }
    input {
        border:1px solid var(--border-color);
        border-radius:var(--input-radius)!important;
        color:var(--text-color);
        padding:var(--input-padding);
        height:auto;
    }
    textarea {
        border:1px solid var(--border-color);
        border-radius:var(--input-radius)!important;
        color:var(--text-color);
        padding:var(--input-padding);
        height:auto;
    }
    .form-group {
        margin-top:15px;
        margin-bottom:15px;
    }
    .form-control-static a {
        color:var(--text-efty);
        text-decoration: underline;
    }
    .checkbox input[type="checkbox"]:checked + label::after {
         content: "✓";
     }


    /* Alerts / notifications */
    .alert {
        box-shadow: none;
        border-radius: var(--card-radius);
        margin-top:10px;
    }
    .alert-danger {
    }
    .alert-danger *, .alert-success * {
        color: #fff;
    }
    .alert.alert-info {
        background:#fff;
        color: var(--text-color)!important;
        border:1px solid var(--border-color)
    }
    .alert.alert-icon {
        padding-left: 60px;
    }
    .alert a {
        color: var(--text-color)!important;
        text-decoration: underline;
    }
    .alert-success a {
        color: #fff!important;
    }
    .alert strong {
        color: var(--text-color)!important;
    }
    .alert-warning {
        background-color:#facc15!important;
        border-color:#facc15!important;
    }
    .alert-warning a, .alert-warning strong {
        color:#fff!important;
    }
    .alert-icon svg {
        position: absolute;
        left: 18px;
        height: 30px;
        width: 30px;
        text-align: center;
        top: 16px;
        line-height: 30px;
    }
    .alert-icon.alert-icon-sm svg {
        height: 24px;
        width: 24px;
    }
    .alert-icon svg, .alert-icon svg * {
        color:var(--text-efty);
    }
    .alert-warning.alert-icon svg, .alert-warning.alert-icon svg * {
        color:#fff!important;
    }
    .alert-danger.alert-icon svg, .alert-danger.alert-icon svg * {
        color:#fff!important;
    }
    .alert button.close {
        font-weight: normal;
    }


    /* Sign in */
    .account-logo-box {
        background:#fff!important;
        border-radius: var(--card-radius) var(--card-radius) 0 0;
    }
    .account-pages .account-content {
        padding: 10px 30px 20px 30px;
        border-radius: 0 0 var(--card-radius) var(--card-radius);
    }



    /* Buttons */
    .ui-2025 .waves-effect .waves-ripple {
        display: none !important;
    }
    .ui-2025 .waves-effect {
        overflow: visible !important;
    }
    .ui-2025 .waves-light {
        color: inherit;
    }
    .btn, .btn.btn-default{
        border-radius: var(--input-radius);
        border: none;
        background: none;
        color: var(--text-color);
        padding: 1rem 2rem;
        transition: background-color .15s ease;
        box-shadow: none;
        font-size:120%;
    }
    .btn.btn-sm {
        font-size:90%;
    }
    .btn.btn-sm svg {
        width: 16px;
        height: 16px;
    }
    .btn.btn-default {
        background-color:var(--bg-efty);
        color:#fff;
    }
    .btn.btn-default:hover {
        filter: brightness(95%);
        color:#fff;
    }
    .btn.btn-danger * {
        color:#fff;
    }
    .btn.btn-default * {
        color:#fff;
    }
    .btn i[class~="ti"],
    .btn i[class^="ti-"],
    .btn i[class*=" ti-"] {
        display: none !important;
    }
    form:has(> .btn.btn-success):not(:has(> .btn:not(.btn.btn-success)))
    > .btn.btn-success{
        flex: 1 1 100%;
        width: 100%;
    }
    .btn-secondary {
        border:1px solid var(--border-color);
        background:#fff;
    }
    .btn-secondary:hover {
        background:var(--hover-light);
    }
    .dt-button {
        border-radius:var(--button-radius);
        border-color: var(--border-color);
        background: #fff;
        padding: 10px 15px;
        color: var(--text-color);
        margin: 0;
    }
    .dt-button:hover {
        border: 1px solid #d8d7d7 !important;
        background-color: #ebebeb!important;
        background-image: none!important;
        filter: none!important;
    }
    .dt-button.datatable-btn-success {
        color:#fff!important;
        background-color: var(--bg-success)!important;
        border:none!important;
    }
    .dt-button.datatable-btn-success span {
        color:#fff!important;
    }
    .dt-button.datatable-btn-success:hover {
        background-color: var(--bg-success-hover)!important;
        border:none!important;
    }
    .dt-button.datatable-btn-success span {
        top: 2px;
        position: relative;
    }
    .btn svg {
        color: #fff;
        top: 5px;
        position: relative;
        margin-right: 5px;
    }
    .btn:has(svg) {
         padding: 5px 16px 10px 16px !important;
     }
    .btn svg * {
        color:#fff;
    }




    /* Tables */
    table.table {
        border-radius: var(--button-radius);
        border:1px solid var(--border-color);
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
    }
    table.table-info thead th {
        background-color: transparent;
        color:var(--text-color);
        text-transform: initial;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
    .table th, .table td {
        padding: 15px 10px;
        border:none;
        border-bottom:1px solid var(--border-color-light);
    }
    .table tr:(:last-child) td {
        border-bottom:none;
    }

    table.table td.select-checkbox::before {
        margin-top: 2px !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
        margin-left:2px!important;
    }
    table.table tr.selected td.select-checkbox::before {
        border: 1px solid var(--text-color) !important;
    }
    table.dataTable tr.selected td.select-checkbox::after {
        margin-top: -2px !important;
        margin-left: 3px;
    }
    table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {

    }
    #datatable_filter input {
        padding:10px 10px;
        background-repeat: no-repeat;
        background-position: right .625rem center;
        background-size: 1.5rem 1.5rem;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='11' cy='11' r='8'/>\
<path d='M21 21l-4.3-4.3'/>\
</svg>");
    }
    /* 1) Basis th styling */
    table.dataTable thead th {
        position: relative;
        padding-right: 1.75rem; /* ruimte voor icoon */
        color: var(--text-efty); /* icoonkleur volgt dit */
    }

    /* DataTables default background verwijderen */
    table.dataTable thead th.sorting,
    table.dataTable thead th.sorting_asc,
    table.dataTable thead th.sorting_desc {
        background-image: none !important;
    }

    /* 2) Pseudo-element voor het icoon */
    table.dataTable thead th.sorting::after,
    table.dataTable thead th.sorting_asc::after,
    table.dataTable thead th.sorting_desc::after,
    table.dataTable thead th.sorting_asc_disabled::after,
    table.dataTable thead th.sorting_desc_disabled::after {
        content: "";
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1em;
        height: 1em;
        opacity: .7;

        background-color: currentColor; /* volgt tekstkleur */
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    /* 3) Niet gesorteerd → lucide chevrons-up-down */
    table.dataTable thead th.sorting::after {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5 5 5-5'/><path d='m7 9 5-5 5 5'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5 5 5-5'/><path d='m7 9 5-5 5 5'/></svg>");
    }

    /* 4) Oplopend → lucide chevron-up */
    table.dataTable thead th.sorting_asc::after {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>");
    }

    /* 5) Aflopend → lucide chevron-down */
    table.dataTable thead th.sorting_desc::after {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    }

    /* 6) Disabled → lichter */
    table.dataTable thead th.sorting_asc_disabled::after,
    table.dataTable thead th.sorting_desc_disabled::after {
        opacity: .35;
    }
    .datagrid-icon {
        background:var(--bg-efty-light);
        font-weight: bold;
    }
    .datagrid-icon.selected {
        background: var(--bg-success);
        color: #fff;
    }
    .pagination > .active > a {
         background-color: var(--bg-efty);
         border-color: var(--bg-efty);
     }


    /* Modal */
    .ekko-lightbox .modal-dialog {
        -webkit-filter: none;
        border: 0;
        border-radius: var(--card-radius)
    }
    .ekko-lightbox .modal-content {
        border: 0;
        border-radius: var(--card-radius)
    }
    .ekko-lightbox .modal-header,
    .ekko-lightbox .modal-footer {
        border: 0;
    }
    .ekko-lightbox .modal-header {
        border-top-left-radius: var(--card-radius);
        border-top-right-radius: var(--card-radius);
    }
    .ekko-lightbox .modal-footer {
        border-bottom-left-radius: var(--card-radius);
        border-bottom-right-radius: var(--card-radius);
    }
    .ekko-lightbox .modal-body {
        padding: 0;
    }
    .modal-dialog {
        top:0;
        position: absolute;
    }
    .modal-header {
        background-color:var(--bg-efty);
    }
    #newBulkEdit .modal-dialog {
        position: relative!important;
    }
    .modal button.close span {
        color:#fff!important;
    }
    .modal-body .tab-content.domain-view {
        margin-top: -11px;
    }
    .modal-body tbody th {
        text-transform: initial;
    }
    .modal-body .nav-tabs li a{
        text-transform: initial;
        padding: 15px 15px !important
    }
    .modal-body button.close span {
        font-weight: normal;
    }
    .modal-body table.edit-table th, .modal-body table.edit-table td {
        padding:5px!important;
    }
    .modal-body table.edit-table input:not([type="checkbox"]), .modal-body table.edit-table select, .modal-body table.edit-table textarea {
        background: #fff;
        width:100%!important;
    }
    .modal-body table.edit-table {
        padding:6px 10px;
    }
    .modal table.no-border, .modal table.no-border td, .modal table.no-border th {
        border:none!important;
    }
    .modal table td.hdr {
        font-weight:bold!important;
    }


    /* Labels */
    .label.label-lg {
        font-size: 100%;
        padding:7px 13px;
        border-radius: var(--button-radius);
    }
    .label.label-success {
        background-color: var(--bg-success);
        color:#fff;
        border:none;
    }
    .label.label-info {
        background-color: var(--bg-efty);
        color:#fff;
        border:none;
    }


    /* Portlet (Bulk editing) */
    .portlet .portlet-heading .portlet-title {
        text-transform: initial;
    }
    .portlet table.table {
        padding: 10px;
    }
    .portlet table.table th label {
        text-transform: lowercase;
        display: inline-block;
    }
    .portlet table.table th label::first-letter {
         text-transform: uppercase;
     }
    .portlet table.table th, .portlet table.table td {
        border: none;
    }
    .portlet input, .portlet select, .portlet input, .portlet textarea {
        margin-bottom:5px;
    }

    /* Sweet alert */
    .sweet-alert button.cancel {
        color:#fff;
    }
    .sweet-alert button.confirm {
        color:#fff;
        background-color: var(--bg-success)!important;
    }
    .sweet-alert button.confirm:hover {
        filter:brightness(95%);
    }


    /* Autocomplete */
    .autocomplete-no-suggestion {
        padding: 8px 12px;
        color: var(--text-color);
        border-top: 1px solid #eee;
    }


    /* Popup setting boxes with file upload */
    .popout2026 {
        max-width:600px;
        margin: 0 auto;
        border-radius: var(--card-radius);
        border: 1px solid var(--border-color);
        margin-top:20px;
        background:var(--bg-grey);
    }

    .popout2026 button.btn-success {
        width:100%;
    }


    /* Utility classes */
    .bg-light {
        background:var(--bg-light);
    }

    /* Integrations */
    .integrations-page .integrations-shell {
        padding: 28px;
        background: #ffffff;
    }
    .integrations-page .integrations-hero {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 24px;
        padding: 26px;
        border: 1px solid var(--border-color-light);
        border-radius: 18px;
        background: #ffffff;
    }
    .integrations-page .integrations-hero-copy {
        max-width: 760px;
    }
    .integrations-page .integrations-kicker {
        display: inline-block;
        margin-bottom: 10px;
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--bg-efty-light);
        color: var(--text-efty);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .integrations-page .integrations-heading {
        margin: 0 0 10px;
        font-size: 32px;
        line-height: 1.1;
        color: #1f2937;
    }
    .integrations-page .integrations-subtitle {
        margin: 0;
        max-width: 640px;
        font-size: 15px;
        line-height: 1.7;
        color: #6b7280;
    }
    .integrations-page .integrations-summary {
        display: flex;
        gap: 14px;
        min-width: 320px;
    }
    .integrations-page .integrations-summary-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 18px;
        border: 1px solid var(--border-color-light);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.9);
    }
    .integrations-page .integrations-summary-value {
        display: block;
        margin-bottom: 6px;
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        color: #111827;
    }
    .integrations-page .integrations-summary-label {
        display: block;
        font-size: 13px;
        color: #6b7280;
    }
    .integrations-page .integrations-grid > [class*="col-"] {
        margin-bottom: 20px;
    }
    .integrations-page .integration-card {
        height: 100%;
        padding: 24px;
        border: 1px solid var(--border-color);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .integrations-page .integration-card:hover {
        transform: translateY(-2px);
        border-color: #cfd8e3;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    }
    .integrations-page .integration-status-connected {
        border-color: #bde7d3;
        background: linear-gradient(180deg, #ffffff 0%, #fbfffc 100%);
    }
    .integrations-page .integration-status-locked {
        border-color: #eadfc2;
        background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
    }
    .integrations-page .integration-card-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .integrations-page .integration-eyebrow {
        display: inline-block;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #8b95a7;
    }
    .integrations-page .integration-title {
        margin: 0;
        font-size: 25px;
        line-height: 1.15;
        color: #111827;
    }
    .integrations-page .integration-badge {
        display: inline-block;
        margin-left: 8px;
        padding: 4px 10px;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        vertical-align: middle;
        text-transform: uppercase;
    }
    .integrations-page .integration-state-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 999px;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 700;
    }
    .integrations-page .integration-state-connected {
        background: rgba(16, 185, 129, 0.12);
        color: #0f8b5f;
    }
    .integrations-page .integration-state-inactive {
        background: #eff3f8;
        color: #5f6b7a;
    }
    .integrations-page .integration-state-locked {
        background: rgba(217, 158, 19, 0.12);
        color: #a26b00;
    }
    .integrations-page .integration-highlight {
        margin-bottom: 16px;
        padding: 14px 16px;
        border-radius: 14px;
        background: #0f172a;
        color: #e5eef9;
        word-break: break-all;
    }
    .integrations-page .integration-highlight code {
        color: #ffffff;
        background: transparent;
        padding: 0;
        font-size: 13px;
    }
    .integrations-page .integration-card-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 14px;
    }
    .integrations-page .integration-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .integrations-page .integration-primary-action,
    .integrations-page .integration-delete-action {
        border-radius: 999px;
        padding: 10px 16px;
        font-weight: 600;
    }
    .integrations-page .integration-delete-action {
        border-color: #d5dbe3;
        background: #fff;
        color: #4b5563 !important;
    }
    .integrations-page .integration-delete-action:hover,
    .integrations-page .integration-delete-action:focus {
        background: #f8fafc;
        border-color: #c7d0db;
        color: #111827 !important;
    }
    .integrations-page .integration-delete-action i {
        margin-right: 5px;
        color: inherit;
    }
    .integrations-page .integration-text-link {
        font-weight: 600;
        color: var(--text-efty);
    }

    /* Mobile */
    @media (max-width: 767px) {
        .integrations-page .integrations-shell {
            padding: 18px;
        }
        .integrations-page .integrations-hero {
            flex-direction: column;
            padding: 20px;
        }
        .integrations-page .integrations-heading {
            font-size: 26px;
        }
        .integrations-page .integrations-summary {
            min-width: 0;
            flex-wrap: wrap;
        }
        .integrations-page .integrations-summary-item {
            min-width: calc(50% - 7px);
        }
        .integrations-page .integration-card {
            padding: 20px;
        }
        .integrations-page .integration-card-top {
            flex-direction: column;
            align-items: flex-start;
        }

        .dt-button {
            margin:0 5px 5px 0;
        }
        #datatable_filter input {
            width:100%;
        }
        .modal-dialog {
            width:95%!important;
        }
        .btn {
            margin-bottom:3px!important;
        }
        .table-responsive {
            border:none!important;
        }
        .modal-body .nav-tabs li a{
            padding: 13px 13px !important
        }
        .user-list.notify-list{
            width: 60vw !important;
            margin-top: 5px;
        }

    }

}