/*
 * IsolatERP design skin (UX wave slice 3) — ADDITIVE design-token layer loaded LAST in the
 * layouts, only while the host setting App.Look.DesignSkinEnabled is "true". Chrome-level
 * only: page background, header, aside menu, cards, buttons, forms, dropdowns, modals and
 * the login page. Grids/DataTables and transaction widgets are deliberately untouched in
 * round one, so day-to-day data entry looks and behaves exactly as before.
 */

:root {
    --isl-primary: #5d3ebc;
    --isl-primary-600: #4c2fa3;
    --isl-primary-100: #efeafd;
    --isl-primary-glow: rgba(93, 62, 188, .35);
    --isl-accent: #ffd24d;
    --isl-bg: #f4f5fb;
    --isl-surface: #ffffff;
    --isl-border: #e7e8f2;
    --isl-text: #3b3f51;
    --isl-muted: #8a8fa8;
    --isl-aside-bg: #221d3a;
    --isl-aside-bg-2: #2c2550;
    --isl-aside-text: #b7b1d6;
    --isl-radius: 12px;
    --isl-radius-sm: 8px;
    --isl-shadow: 0 2px 10px rgba(32, 28, 64, .06);
    --isl-shadow-lg: 0 12px 34px rgba(32, 28, 64, .16);
    --isl-transition: .18s ease;
}

/* ============================= Page base ============================= */
body {
    background: var(--isl-bg);
    -webkit-font-smoothing: antialiased;
}

.kt-content {
    background: var(--isl-bg);
}

/* ============================= Header ============================= */
.kt-header {
    background: var(--isl-surface);
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--isl-border), var(--isl-shadow);
}

.kt-header__topbar-item .kt-header__topbar-icon {
    border-radius: 10px;
    transition: background var(--isl-transition);
}

.kt-header__topbar-item:hover .kt-header__topbar-icon,
.kt-header__topbar-item.show .kt-header__topbar-icon {
    background: var(--isl-primary-100);
}

.kt-header__topbar-item:hover .kt-header__topbar-icon i,
.kt-header__topbar-item.show .kt-header__topbar-icon i {
    color: var(--isl-primary);
}

/* ============================= Subheader ============================= */
.kt-subheader {
    background: transparent;
    box-shadow: none;
}

.kt-subheader .kt-subheader__title {
    color: var(--isl-text);
    font-weight: 600;
}

/* ============================= Aside (menu) ============================= */
.kt-aside,
.kt-aside-menu-wrapper.kt-aside-menu-light,
.kt-aside .kt-aside-menu {
    background: linear-gradient(180deg, var(--isl-aside-bg) 0%, var(--isl-aside-bg-2) 100%);
}

.kt-aside__brand {
    background: var(--isl-aside-bg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

/* The logo is a JPEG with a white canvas — sit it on a white rounded chip so it reads as designed. */
.kt-aside__brand-logo a img {
    background: #fff;
    border-radius: 10px;
    padding: 3px 10px;
}

.kt-aside__brand-aside-toggler .kt-svg-icon g [fill] {
    fill: var(--isl-aside-text);
}

/* Menu links become rounded pills with a soft hover slide. Top-level items get the
   inset pill; SUBMENU items keep the classic full width - the 10px side margins made
   labels like "Create Bulk Invoices" wrap to a second line (user report 2026-10-23). */
.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link,
.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item > .kt-menu__link {
    border-radius: 10px;
    transition: background var(--isl-transition), transform var(--isl-transition);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    margin: 2px 10px;
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item > .kt-menu__link {
    margin: 2px 0;
    border-radius: 0 10px 10px 0;
    /* A little extra text room so borderline labels (Bulk Receipt Uploader) stay on one line. */
    padding-right: 15px !important;
}

.kt-aside-menu .kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__link .kt-menu__ver-arrow,
.kt-aside-menu .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__link .kt-menu__link-bullet > span {
    color: var(--isl-aside-text);
}

.kt-aside-menu .kt-menu__item:not(.kt-menu__item--active) > .kt-menu__link:hover {
    background: rgba(255, 255, 255, .07);
    transform: translateX(2px);
}

.kt-aside-menu .kt-menu__item > .kt-menu__link:hover .kt-menu__link-text,
.kt-aside-menu .kt-menu__item > .kt-menu__link:hover .kt-menu__link-icon,
.kt-aside-menu .kt-menu__item > .kt-menu__link:hover .kt-menu__ver-arrow,
.kt-aside-menu .kt-menu__item--open > .kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__item--open > .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__item--open > .kt-menu__link .kt-menu__ver-arrow {
    color: #fff;
}

.kt-aside-menu .kt-menu__item--active > .kt-menu__link,
.kt-aside-menu .kt-menu__item--here > .kt-menu__link {
    background: linear-gradient(90deg, var(--isl-primary), #7e57e0);
    /* Symmetric glow - the pill casts upward as well as downward (user request). */
    box-shadow: 0 -6px 16px var(--isl-primary-glow), 0 6px 16px var(--isl-primary-glow);
}

.kt-aside-menu .kt-menu__item--active > .kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__item--active > .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__item--active > .kt-menu__link .kt-menu__ver-arrow,
.kt-aside-menu .kt-menu__item--here > .kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__item--here > .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__item--here > .kt-menu__link .kt-menu__ver-arrow {
    color: #fff;
}

.kt-aside-menu .kt-menu__submenu {
    background: transparent;
}

/* Tighter pills when the aside is minimized to icons. */
body.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    margin: 2px 6px;
}

/* Quick-nav search + the "New" button inside the dark aside. */
.kt-aside .searchMenuContainerSelect2 .form-control,
.kt-aside .searchMenuContainerSelect2 .select2-selection {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 10px;
}

.kt-aside .searchMenuContainerSelect2 .select2-selection__rendered,
.kt-aside .searchMenuContainerSelect2 .select2-selection__placeholder {
    color: var(--isl-aside-text);
}

.left-menu-new-btn {
    background: linear-gradient(90deg, var(--isl-primary), #7e57e0);
    color: #fff;
    border: 0;
    border-radius: 10px;
    margin: 10px 12px 4px;
    padding: 8px 0;
    font-weight: 600;
    box-shadow: 0 6px 16px var(--isl-primary-glow);
    transition: transform var(--isl-transition), box-shadow var(--isl-transition);
}

.left-menu-new-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px var(--isl-primary-glow);
    color: #fff;
}

/* Dark scrollbar inside the aside. */
.kt-aside ::-webkit-scrollbar { width: 6px; }
.kt-aside ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.kt-aside ::-webkit-scrollbar-track { background: transparent; }

/* ============================= Cards / portlets ============================= */
.kt-portlet {
    border: 0;
    border-radius: var(--isl-radius);
    box-shadow: var(--isl-shadow);
}

.kt-portlet .kt-portlet__head {
    border-bottom: 1px solid var(--isl-border);
    border-radius: var(--isl-radius) var(--isl-radius) 0 0;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-title {
    color: var(--isl-text);
    font-weight: 600;
}

/* ============================= Buttons ============================= */
.btn {
    border-radius: var(--isl-radius-sm);
    transition: transform var(--isl-transition), box-shadow var(--isl-transition),
                background var(--isl-transition), border-color var(--isl-transition);
}

.btn-primary,
.btn-brand {
    background: var(--isl-primary);
    border-color: var(--isl-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-brand:hover, .btn-brand:focus, .btn-brand:active {
    background: var(--isl-primary-600) !important;
    border-color: var(--isl-primary-600) !important;
}

.btn-primary:hover,
.btn-brand:hover,
.btn-success:hover,
.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(32, 28, 64, .18);
}

.btn:active {
    transform: translateY(0);
}

/* ============================= Forms ============================= */
.form-control {
    border-radius: var(--isl-radius-sm);
    border-color: #dfe1ee;
    transition: border-color var(--isl-transition), box-shadow var(--isl-transition);
}

.form-control:focus {
    border-color: var(--isl-primary);
    box-shadow: 0 0 0 3px rgba(93, 62, 188, .14);
}

.kt-content .select2-container--default .select2-selection--single,
.kt-content .select2-container--default .select2-selection--multiple {
    border-radius: var(--isl-radius-sm);
    border-color: #dfe1ee;
}

/* ============================= Dropdowns / modals ============================= */
.dropdown-menu {
    border: 0;
    border-radius: var(--isl-radius);
    box-shadow: var(--isl-shadow-lg);
}

.modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--isl-shadow-lg);
}

.modal .modal-header {
    border-bottom: 1px solid var(--isl-border);
}

/* ============================= Tabs ============================= */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--isl-primary);
    border-bottom: 2px solid var(--isl-primary);
}


/* ============================= Data grids (round 2) ============================= */
/* List tables (DataTables) brought onto the token system: lavender header band, whisper
   striping, row hover, purple pager. Colors only - no sizing/layout changes, so column
   widths, responsive collapse and the pager's behavior stay exactly as before. */
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
    background: #f1effa !important;
    color: #3f2c74 !important;
    font-weight: 600;
    border-color: #e7e3f6 !important;
}

.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper table.dataTable.table-striped tbody tr.even,
.dataTables_wrapper table.dataTable.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

.dataTables_wrapper table.dataTable.table-striped tbody tr.odd,
.dataTables_wrapper table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: #faf9fe !important;
}

.dataTables_wrapper table.dataTable.table-hover tbody tr:hover,
.dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: #f3f0fc !important;
}

.dataTables_wrapper table.dataTable tbody td {
    border-color: #eef0f8 !important;
    color: var(--isl-text);
}

.dataTables_wrapper table.dataTable.no-footer {
    border-bottom: 1px solid #e7e3f6 !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label {
    color: var(--isl-muted) !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dfe1ee;
    border-radius: var(--isl-radius-sm);
    padding: 3px 8px;
    color: var(--isl-text);
    background: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #efeafd !important;
    color: var(--isl-primary) !important;
    border: 0 !important;
    border-radius: 50% !important;
    transition: background var(--isl-transition), color var(--isl-transition), transform var(--isl-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: #e2d9fb !important;
    transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--isl-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--isl-primary-glow);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background: transparent !important;
    color: #c3c6d9 !important;
}
.dataTables_wrapper table.dataTable tbody td.control:before,
.dataTables_wrapper table.dataTable tbody td.dtr-control:before {
    background-color: var(--isl-primary) !important;
    border-color: var(--isl-primary) !important;
    box-shadow: 0 2px 6px var(--isl-primary-glow);
}

.dataTables_wrapper table.dataTable tbody tr.parent td.control:before,
.dataTables_wrapper table.dataTable tbody tr.parent td.dtr-control:before {
    background-color: #b7a6ec !important;
    border-color: #b7a6ec !important;
}
/* ============================= "Logged In" toast (main menu) ============================= */
/* custom-dashboard.css paints it flat green (#53db57) with a #007bff progress bar.
   Re-dress it in the theme: dark-indigo card like the aside, lavender detail text,
   gradient progress rail. Scoped to the container so other .notification uses stay put. */
.notification-container .notification {
    background: linear-gradient(135deg, #2c2550 0%, #221d3a 100%) !important;
    color: #fff;
    border-left: 4px solid var(--isl-primary);
    border-radius: var(--isl-radius);
    box-shadow: 0 12px 30px rgba(34, 29, 58, .35), 0 3px 10px var(--isl-primary-glow);
    padding: 14px 16px;
}

.notification-container .notification h5 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 7px;
    letter-spacing: .02em;
}

.notification-container .notification span {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.notification-container .progress-bar-container {
    background-color: rgba(255, 255, 255, .16) !important;
    border-radius: 3px;
    height: 4px;
}

.notification-container .progress-bar {
    background: linear-gradient(90deg, var(--isl-primary), #9b7bf0) !important;
    border-radius: 3px;
}/* ============================= Login page (Account layout) ============================= */
/* Final login treatment (user, 2026-10-23): the left panel keeps its ORIGINAL layout,
   spacing and control shapes — only the theme colors are applied on top. The form column
   carries an inline #1a1a1a, so the gradient needs !important to take over. */
.kt-login.kt-login--v1 .kt-login__aside {
    background: linear-gradient(165deg, #241e42 0%, #1b1733 55%, #191528 100%) !important;
}

/* Keep the panel at its classic width (Custom.css 480px; login-1.css would widen it to
   605px). Desktop only - small screens keep their stacked 100% layout. */
@media (min-width: 1025px) {
    .kt-login.kt-login--v1 .kt-login__aside {
        width: 480px !important;
    }
}

/* The main action button only (NOT the .checkTenants social links): theme gradient. */
.kt-login.kt-login--v1 .kt-login__aside button.btn-activation {
    background: linear-gradient(90deg, var(--isl-primary), #7e57e0) !important;
    border: 0;
    color: #fff;
    box-shadow: 0 8px 22px var(--isl-primary-glow);
    transition: transform var(--isl-transition), box-shadow var(--isl-transition);
}

.kt-login.kt-login--v1 .kt-login__aside button.btn-activation:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 28px var(--isl-primary-glow);
}

/* Links pick up the theme's lavender accent. */
.kt-login.kt-login--v1 .kt-login__aside .kt-login__link-forgot {
    color: #a79ddb;
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__link-forgot:hover {
    color: #fff;
}

/* Right marketing panel: untouched apart from rounding the artwork onto a soft shadow. */
.kt-login.kt-login--v1 .account-con .account-bg img#login-charts {
    border-radius: var(--isl-radius);
    box-shadow: var(--isl-shadow-lg);
}

/* Slimmer action buttons on ALL account pages (login, forgot password, recover account,
   email activation, register): stock Custom.css renders 12px-pad / 20px-font slabs. */
.kt-login.kt-login--v1 .btn-activation,
.kt-login.kt-login--v1 .btn-back {
    padding: 8px 0 !important;
    font-size: 17px !important;
}