/*
 * KSA client area skin (2026-11-10): member menu + dashboard + list pages
 * (services, domains, invoices, tickets, network status).
 * Colours only / decoration only - no element is hidden or moved.
 * Tones are set per menu item by includes/shuffythemenavbar.tpl (data-ksa-tone).
 */
[data-ksa-tone="violet"] { --t1: #8b5cf6; --t2: #c084fc; }
[data-ksa-tone="blue"]   { --t1: #2563eb; --t2: #38bdf8; }
[data-ksa-tone="teal"]   { --t1: #0d9488; --t2: #2dd4bf; }
[data-ksa-tone="amber"]  { --t1: #d97706; --t2: #fbbf24; }
[data-ksa-tone="rose"]   { --t1: #e11d48; --t2: #fb7185; }
[data-ksa-tone="pink"]   { --t1: #db2777; --t2: #f472b6; }
[data-ksa-tone="green"]  { --t1: #059669; --t2: #34d399; }
[data-ksa-tone="indigo"] { --t1: #4f46e5; --t2: #818cf8; }
[data-ksa-tone="gold"]   { --t1: #b45309; --t2: #facc15; }
[data-ksa-tone="cyan"]   { --t1: #0891b2; --t2: #67e8f9; }

/* =====================================================================
   1. MEMBER MENU (main sidebar)
   ===================================================================== */
body.dark__sidebar__color .sidebar__container {
    background:
        radial-gradient(120% 40% at 50% 0%, rgba(139, 92, 246, .28), transparent 60%),
        radial-gradient(90% 30% at 0% 100%, rgba(56, 189, 248, .14), transparent 70%),
        linear-gradient(180deg, #1d1530 0%, #171126 55%, #120d1e 100%);
}
/* icon tiles */
.sidebar .sidebar__item[data-ksa-tone] .side__bar__item__icon {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-secondary-opacity: .45;
    color: #fff !important;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--t1), var(--t2)) !important;
    box-shadow: 0 6px 16px -6px var(--t1), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease;
    filter: saturate(.85) brightness(.92);
}
.sidebar .sidebar__item[data-ksa-tone]:hover .side__bar__item__icon,
.sidebar .sidebar__item[data-ksa-tone].ksa-current .side__bar__item__icon {
    filter: none;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 10px 22px -6px var(--t1), 0 0 0 3px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sidebar .sidebar__item[data-ksa-tone] .side__bar__item__text { transition: color .25s ease, letter-spacing .25s ease; }
.sidebar .sidebar__item[data-ksa-tone]:hover .side__bar__item__text,
.sidebar .sidebar__item[data-ksa-tone].ksa-current .side__bar__item__text { color: #fff !important; }

/* current page indicator */
/* (no position change on .sidebar__item itself: the flyout panel is positioned against the sidebar) */
.sidebar a.sidebar__item.ksa-current,
.sidebar .sidebar__item.ksa-current > .sidebar__top > .sidebar__head { position: relative; }
.sidebar .sidebar__item.ksa-current > .sidebar__top,
.sidebar a.sidebar__item.ksa-current {
    background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .09));
    border-radius: 14px;
}
.sidebar a.sidebar__item.ksa-current::before,
.sidebar .sidebar__item.ksa-current > .sidebar__top > .sidebar__head::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 4px;
    height: 26px;
    margin-top: -13px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--t2, #c084fc), var(--t1, #8b5cf6));
    box-shadow: 0 0 12px var(--t1, #8b5cf6);
    z-index: 2;
}

/* badges on menu items */
.sidebar .side__bar__item__icon__badge,
.sidebar .childitem__side__bar__item__icon__badge {
    background: linear-gradient(135deg, #f43f5e, #fb923c) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -3px rgba(244, 63, 94, .7);
    animation: ksaCaBadge 2.4s ease-in-out infinite;
}
@keyframes ksaCaBadge { 50% { transform: scale(1.12); } }

/* flyout panel */
.sidebar .sidebar__item.sidebar__item_dropdown .sidebar__body {
    background: linear-gradient(180deg, #ffffff 0%, #fbf9fe 100%) !important;
    border-inline-start: 1px solid rgba(139, 92, 246, .12) !important;
    box-shadow: 30px 0 60px -30px rgba(40, 20, 70, .35) !important;
}
.sidebar .sidebar__item[data-ksa-tone] .sidebar__dropdown__title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #1f1530 !important;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(139, 92, 246, .2);
}
.sidebar .sidebar__item[data-ksa-tone] .sidebar__dropdown__title i {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-secondary-opacity: .45;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(135deg, var(--t1), var(--t2));
    box-shadow: 0 8px 18px -8px var(--t1);
}
.sidebar .sidebar__item[data-ksa-tone] .sidebar__body .sidebar__link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: 1px solid transparent;
    color: #4b5563 !important;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.sidebar .sidebar__item[data-ksa-tone] .ksa-nav-child-icon {
    --fa-primary-color: var(--t1);
    --fa-secondary-color: var(--t2);
    --fa-secondary-opacity: .55;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    color: var(--t1);
    background: color-mix(in srgb, var(--t1) 10%, #fff);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s ease;
}
.sidebar .sidebar__item[data-ksa-tone] .sidebar__body .sidebar__link:hover,
.sidebar .sidebar__item[data-ksa-tone] .sidebar__body .sidebar__link.ksa-current {
    color: var(--t1) !important;
    background: color-mix(in srgb, var(--t1) 6%, #fff) !important;
    border-color: color-mix(in srgb, var(--t1) 18%, #fff);
    transform: translateX(-3px);
}
.ltr .sidebar .sidebar__item[data-ksa-tone] .sidebar__body .sidebar__link:hover { transform: translateX(3px); }
.sidebar .sidebar__item[data-ksa-tone] .sidebar__body .sidebar__link:hover .ksa-nav-child-icon,
.sidebar .sidebar__item[data-ksa-tone] .sidebar__body .sidebar__link.ksa-current .ksa-nav-child-icon {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    color: #fff;
    background: linear-gradient(135deg, var(--t1), var(--t2));
    transform: rotate(-8deg) scale(1.05);
}
.ksa-nav-divider {
    display: block;
    height: 1px;
    margin: 6px 8px 12px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .25), transparent);
}

/* logout */
.sidebar .sidebar__logout .side__bar__item__icon {
    color: #fff !important;
    border-radius: 13px;
    background: linear-gradient(135deg, #475569, #64748b) !important;
}
.sidebar .sidebar__logout:hover .side__bar__item__icon {
    background: linear-gradient(135deg, #e11d48, #fb7185) !important;
    box-shadow: 0 8px 18px -6px #e11d48;
}

/* =====================================================================
   2. PAGE HEADER (title + breadcrumb) on client pages
   ===================================================================== */
.ksa-ca .not__shoppingcart__page__header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(139, 92, 246, .16), transparent 60%),
        radial-gradient(50% 120% at 0% 100%, rgba(56, 189, 248, .12), transparent 60%),
        linear-gradient(135deg, #faf7ff, #f3f7ff) !important;
    border-bottom: 1px solid rgba(139, 92, 246, .1);
}
.ksa-ca .not__shoppingcart__page__header > .main__page__content { display: flow-root; padding-top: 18px; padding-bottom: 16px; }
.ksa-ca-page-icon {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-secondary-opacity: .45;
    float: right;
    margin-inline-end: 16px;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(135deg, var(--t1, #8b5cf6), var(--t2, #c084fc));
    box-shadow: 0 14px 28px -12px var(--t1, #8b5cf6), inset 0 1px 0 rgba(255, 255, 255, .3);
    animation: ksaCaFloat 5s ease-in-out infinite;
}
.ltr .ksa-ca-page-icon, [dir="ltr"] .ksa-ca-page-icon { float: left; }
@keyframes ksaCaFloat { 50% { transform: translateY(-4px) rotate(-3deg); } }
.ksa-ca .not__shoppingcart__page__header h6 {
    font-weight: 800 !important;
    background: linear-gradient(90deg, #1f1530, var(--t1, #8b5cf6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.ksa-ca .not__shoppingcart__page__header::after {
    /* decorative rings */
    content: '';
    position: absolute;
    inset-inline-end: -60px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 36px solid rgba(139, 92, 246, .06);
    z-index: -1;
}

/* =====================================================================
   3. DASHBOARD
   ===================================================================== */
/* stat tiles */
.client__area__proforomance__box {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(139, 92, 246, .1) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px -20px rgba(40, 20, 70, .35);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.client__area__proforomance__box::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--t1), var(--t2));
}
.client__area__proforomance__box::after {
    content: '';
    position: absolute;
    inset-inline-end: -40px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--t1) 16%, transparent), transparent 70%);
    pointer-events: none;
}
a.client__area__proforomance__box:hover, .client__area__proforomance__box:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--t1) 35%, #fff) !important;
    box-shadow: 0 22px 40px -22px var(--t1);
}
.client__area__proforomance__box__icon {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-secondary-opacity: .5;
    width: 48px;
    height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 20px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--t1), var(--t2)) !important;
    box-shadow: 0 10px 20px -10px var(--t1);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.client__area__proforomance__box:hover .client__area__proforomance__box__icon { transform: rotate(-8deg) scale(1.08); }
.client__area__proforomance__box .coodiv-text-3 {
    font-weight: 800 !important;
    color: var(--t1) !important;
}
.row > [class*="col"]:nth-child(6n+1) > .client__area__proforomance__box { --t1: #8b5cf6; --t2: #c084fc; }
.row > [class*="col"]:nth-child(6n+2) > .client__area__proforomance__box { --t1: #2563eb; --t2: #38bdf8; }
.row > [class*="col"]:nth-child(6n+3) > .client__area__proforomance__box { --t1: #0d9488; --t2: #2dd4bf; }
.row > [class*="col"]:nth-child(6n+4) > .client__area__proforomance__box { --t1: #d97706; --t2: #fbbf24; }
.row > [class*="col"]:nth-child(6n+5) > .client__area__proforomance__box { --t1: #e11d48; --t2: #fb7185; }
.row > [class*="col"]:nth-child(6n+6) > .client__area__proforomance__box { --t1: #059669; --t2: #34d399; }
.client__area__proforomance__box { --t1: #8b5cf6; --t2: #c084fc; }

/* balance / invoices boxes in the profile card */
.client__area__profile__static__box {
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7f3ff, #eef6ff);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.client__area__profile__static__box:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .3), 0 14px 26px -18px #8b5cf6; }
.client__area__profile__static__box h6 { color: #4c1d95; }

/* overview tabs */
.default__coodiv__row__nav {
    gap: 6px;
    flex-wrap: wrap;
}
.default__coodiv__row__nav .nav-item .nav-link {
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-weight: 700;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.default__coodiv__row__nav .nav-item .nav-link:hover { background: rgba(139, 92, 246, .08); color: #6d28d9 !important; transform: translateY(-1px); }
.default__coodiv__row__nav .nav-item.active .nav-link {
    color: #fff !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 10px 20px -10px #7c3aed;
}
.default__coodiv__row__nav .nav-item.active .nav-link::after { display: none !important; }
.default__coodiv__row__nav .nav-item.active .label { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }

/* =====================================================================
   4. LIST PAGES: services / domains / invoices / tickets / status
   ===================================================================== */
.ksa-ca .table-list {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
.ksa-ca .table-list thead th {
    border: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.ksa-ca .table-list tbody tr {
    background: #fff;
    box-shadow: 0 1px 0 rgba(17, 24, 39, .04), 0 8px 24px -18px rgba(40, 20, 70, .35);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
.ksa-ca .table-list tbody td {
    border-top: 1px solid rgba(139, 92, 246, .08) !important;
    border-bottom: 1px solid rgba(139, 92, 246, .08) !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.ksa-ca .table-list tbody td:first-child {
    border-inline-start: 1px solid rgba(139, 92, 246, .08) !important;
    border-start-start-radius: 14px;
    border-end-start-radius: 14px;
    box-shadow: inset -4px 0 0 var(--ksa-row, transparent);
}
.ltr .ksa-ca .table-list tbody td:first-child { box-shadow: inset 4px 0 0 var(--ksa-row, transparent); }
.ksa-ca .table-list tbody td:last-child {
    border-inline-end: 1px solid rgba(139, 92, 246, .08) !important;
    border-start-end-radius: 14px;
    border-end-end-radius: 14px;
}
.ksa-ca .table-list tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -20px rgba(109, 40, 217, .45);
    --ksa-row: #8b5cf6;
}
.ksa-ca .table-list tbody tr[onclick] { cursor: pointer; }
.ksa-ca .table-list tbody tr.ksa-row-ok      { --ksa-row: #10b981; }
.ksa-ca .table-list tbody tr.ksa-row-warn    { --ksa-row: #f59e0b; }
.ksa-ca .table-list tbody tr.ksa-row-bad     { --ksa-row: #ef4444; }
.ksa-ca .table-list tbody tr.ksa-row-muted   { --ksa-row: #9ca3af; }
.ksa-ca .table-list tbody tr.ksa-row-info    { --ksa-row: #3b82f6; }

/* row lead icon injected by JS */
.ksa-ca-row-icon {
    --fa-primary-color: var(--t1);
    --fa-secondary-color: var(--t2);
    --fa-secondary-opacity: .5;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
    margin-inline-end: 12px;
    vertical-align: middle;
    background: color-mix(in srgb, var(--t1) 11%, #fff);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
}
.ksa-ca .table-list tbody tr:hover .ksa-ca-row-icon {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    background: linear-gradient(135deg, var(--t1), var(--t2));
    transform: rotate(-8deg) scale(1.06);
}
.ksa-ca-row-lead { display: inline-flex; align-items: center; }

/* status pills */
.ksa-ca .label.status, .ksa-ca .coodiv__status, .ksa-ca .table-list .label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1.4;
}
.ksa-ca .label.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.ksa-ca .status-active, .ksa-ca .status-paid, .ksa-ca .status-open, .ksa-ca .status-completed {
    color: #047857 !important; background: #d1fae5 !important;
}
.ksa-ca .status-active::before, .ksa-ca .status-open::before { animation: ksaCaPulse 1.8s ease-out infinite; }
@keyframes ksaCaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
    100% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}
.ksa-ca .status-pending, .ksa-ca .status-unpaid, .ksa-ca .status-pending-transfer, .ksa-ca .status-customer-reply, .ksa-ca .status-payment-pending {
    color: #b45309 !important; background: #fef3c7 !important;
}
.ksa-ca .status-suspended, .ksa-ca .status-overdue, .ksa-ca .status-expired, .ksa-ca .status-fraud, .ksa-ca .status-collections {
    color: #b91c1c !important; background: #fee2e2 !important;
}
.ksa-ca .status-terminated, .ksa-ca .status-cancelled, .ksa-ca .status-closed, .ksa-ca .status-refunded, .ksa-ca .status-transferred-away, .ksa-ca .status-draft {
    color: #4b5563 !important; background: #f3f4f6 !important;
}
.ksa-ca .status-answered, .ksa-ca .status-in-progress, .ksa-ca .status-on-hold {
    color: #1d4ed8 !important; background: #dbeafe !important;
}

/* DataTables controls */
.ksa-ca .dataTables_wrapper .dataTables_filter input,
.ksa-ca .dataTables_wrapper .dataTables_length select {
    border-radius: 12px !important;
    border: 1px solid rgba(139, 92, 246, .2) !important;
    padding: 6px 12px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ksa-ca .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .14) !important;
    outline: 0;
}
.ksa-ca .pagination .page-item .page-link, .ksa-ca .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
    margin: 0 3px;
    border: 1px solid rgba(139, 92, 246, .15) !important;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.ksa-ca .pagination .page-item .page-link:hover { transform: translateY(-1px); background: rgba(139, 92, 246, .08); }
.ksa-ca .pagination .page-item.active .page-link, .ksa-ca .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    box-shadow: 0 8px 16px -8px #7c3aed;
}

/* filter boxes in the secondary bar (status filters, counts) */
.ksa-ca .full__width__secondarysidebar__menu .main__nav__title {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px #7c3aed !important;
}
.ksa-ca .view-filter-btns .nav-link, .ksa-ca .view-filter-btns .list-group-item {
    border-radius: 12px !important;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.ksa-ca .view-filter-btns .nav-link:hover, .ksa-ca .view-filter-btns .list-group-item:hover { background: rgba(139, 92, 246, .08) !important; transform: translateY(-1px); }
.ksa-ca .view-filter-btns .nav-link.active, .ksa-ca .view-filter-btns .list-group-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
}
.ksa-ca .view-filter-btns .badge { border-radius: 999px; }

/* network status */
.ksa-ca .issue__status__wrapper, .ksa-ca .shadow__card {
    border-radius: 18px !important;
    border: 1px solid rgba(139, 92, 246, .1);
    box-shadow: 0 14px 34px -24px rgba(40, 20, 70, .4) !important;
}
.ksa-ca .no__data__error__box .message__image svg { animation: ksaCaFloat 6s ease-in-out infinite; }
.ksa-ca .no__data__error__box {
    border-radius: 18px;
    background: radial-gradient(70% 60% at 50% 0%, rgba(139, 92, 246, .07), transparent 70%);
}
.ksa-ca #tableServerStatus .text-center i.fa-check-circle,
.ksa-ca .table-list .fa-check-circle { color: #10b981; }

/* loading skeleton tint */
.ksa-ca .data__loading__animation__wrapper .section__loader__title { color: #7c3aed; font-weight: 700; }

/* =====================================================================
   5. MOTION / TOUCH
   ===================================================================== */
@media (hover: none) {
    .ksa-ca .table-list tbody tr:hover, .client__area__proforomance__box:hover { transform: none; }
}
@media (max-width: 767px) {
    .ksa-ca-page-icon { width: 46px; height: 46px; font-size: 18px; border-radius: 14px; margin-inline-end: 12px; }
    .ksa-ca .not__shoppingcart__page__header > .main__page__content { padding-inline: 14px; }
    .ksa-ca .table-list { border-spacing: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ksa-ca-page-icon, .sidebar .side__bar__item__icon__badge, .ksa-ca .status-active::before { animation: none !important; }
}