/*
 * Active Knocker super admin: new look, v2 (2026-10-23)
 *
 * Opt-in only: ?new_ui=1 on any admin URL sets the cookie ak_new_ui=1, ?new_ui=0 clears it
 * (application/helpers/ak_ui_helper.php). While the cookie is set the views add the class
 * "ak-new-ui" to <html> and <body> and load this file after the Metronic theme.
 * Every rule is scoped under .ak-new-ui, so nothing here can reach the old look.
 *
 * Themes: <html data-ak-theme="light|dark"> is set by a tiny script in <head> from localStorage
 * ("ak_theme": light / dark / system; default system = prefers-color-scheme).
 * Modals, the date picker, jquery-confirm and the invoice preview stay light in dark mode
 * ("light islands"): their page CSS hard-codes dark text.
 *
 * Contents
 *   1 Tokens              8 Forms               15 Command palette
 *   2 Base                9 Data grid           16 Login
 *   3 Sidebar            10 Badges, statuses    17 Invoice preview fence
 *   4 Top bar            11 Menus, tabs, pills  18 Dark-mode fixes
 *   5 Page header        12 Modals              19 Focus, motion, small screens
 *   6 Cards              13 Alerts, toasts, dialogs
 *   7 Buttons            14 Dashboard
 */

/* ================================================================== 1 Tokens */
/* light, also re-declared on the light islands */
.ak-new-ui,
.ak-new-ui .modal,
.ak-new-ui .datepicker,
.ak-new-ui .jconfirm,
.ak-new-ui #upcoming_invoice_container {
    --ak-bg: #f5f6f8;
    --ak-bg-glow: rgba(243, 127, 30, .07);
    --ak-surface: #ffffff;
    --ak-surface-2: #f8f9fb;
    --ak-surface-3: #eff1f4;
    --ak-input: #ffffff;
    --ak-overlay: rgba(255, 255, 255, .78);
    --ak-line: rgba(15, 23, 42, .08);
    --ak-line-2: rgba(15, 23, 42, .14);
    --ak-line-3: rgba(15, 23, 42, .26);
    --ak-text: #0e1117;
    --ak-text-2: #353d4b;
    --ak-text-3: #5e6776;
    --ak-placeholder: #7d8594;
    --ak-link: #b4500b;
    --ak-link-hover: #8a3d07;
    --ak-accent-soft: rgba(243, 127, 30, .12);
    --ak-accent-text: #a14708;

    --ak-success: #067647;
    --ak-success-soft: #ecfdf3;
    --ak-success-line: #abefc6;
    --ak-danger: #b42318;
    --ak-danger-soft: #fef3f2;
    --ak-danger-line: #fecdca;
    --ak-warning: #b54708;
    --ak-warning-soft: #fffaeb;
    --ak-warning-line: #fedf89;
    --ak-info: #175cd3;
    --ak-info-soft: #eff8ff;
    --ak-info-line: #b2ddff;

    --ak-elev-1: 0 0 0 1px var(--ak-line), 0 1px 2px rgba(15, 23, 42, .04);
    --ak-elev-2: 0 0 0 1px var(--ak-line), 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -14px rgba(15, 23, 42, .16);
    --ak-elev-pop: 0 0 0 1px var(--ak-line), 0 24px 56px -20px rgba(15, 23, 42, .32), 0 8px 18px -10px rgba(15, 23, 42, .14);
    --ak-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);

    color-scheme: light;
}

.ak-new-ui {
    --ak-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* brand: Active Knocker orange from the logo. Orange surfaces carry ink text (6.8:1). */
    --ak-brand: #f37f1e;
    --ak-brand-hi: #ff9b45;
    --ak-brand-lo: #e06d0f;
    --ak-on-brand: #1d1206;
    --ak-ring: 0 0 0 3px rgba(243, 127, 30, .38);
    --ak-glow: 0 0 14px 2px rgba(243, 127, 30, .55);

    /* sidebar ink, the same in both themes */
    --ak-ink: #0c0f15;
    --ak-ink-2: #131823;
    --ak-ink-hover: rgba(255, 255, 255, .055);
    --ak-ink-line: rgba(255, 255, 255, .07);
    --ak-ink-text: #aab1be;
    --ak-ink-text-hi: #f5f6f8;
    --ak-ink-muted: #7c8496;
    --ak-ink-icon: #6f7889;

    /* one radius system */
    --ak-r-1: 6px;
    --ak-r-2: 10px;
    --ak-r-inner: 8px;
    --ak-r-3: 14px;
    --ak-r-4: 20px;

    --ak-topbar-h: 60px;
    --ak-card-pad: 20px;
    --ak-ease: cubic-bezier(.2, .7, .2, 1);
    --ak-dur: 160ms;
}

/* dark: html and body both carry .ak-new-ui, so both are listed */
html[data-ak-theme="dark"].ak-new-ui,
html[data-ak-theme="dark"] body.ak-new-ui {
    --ak-bg: #0b0d12;
    --ak-bg-glow: rgba(243, 127, 30, .09);
    --ak-surface: #12151c;
    --ak-surface-2: #161a22;
    --ak-surface-3: #1e232d;
    --ak-input: #0f1218;
    --ak-overlay: rgba(14, 17, 23, .74);
    --ak-line: rgba(255, 255, 255, .07);
    --ak-line-2: rgba(255, 255, 255, .13);
    --ak-line-3: rgba(255, 255, 255, .24);
    --ak-text: #eef0f4;
    --ak-text-2: #c6cbd5;
    --ak-text-3: #9aa2b2;
    --ak-placeholder: #747c8d;
    --ak-link: #ffa463;
    --ak-link-hover: #ffc595;
    --ak-accent-soft: rgba(243, 127, 30, .16);
    --ak-accent-text: #ffb27a;

    --ak-success: #4fd497;
    --ak-success-soft: rgba(23, 178, 106, .14);
    --ak-success-line: rgba(23, 178, 106, .36);
    --ak-danger: #ff8f86;
    --ak-danger-soft: rgba(240, 68, 56, .14);
    --ak-danger-line: rgba(240, 68, 56, .38);
    --ak-warning: #fbc15a;
    --ak-warning-soft: rgba(247, 144, 9, .14);
    --ak-warning-line: rgba(247, 144, 9, .38);
    --ak-info: #8fcaff;
    --ak-info-soft: rgba(46, 144, 250, .14);
    --ak-info-line: rgba(46, 144, 250, .38);

    --ak-elev-1: 0 0 0 1px var(--ak-line), 0 1px 2px rgba(0, 0, 0, .3);
    --ak-elev-2: 0 0 0 1px var(--ak-line), 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .6);
    --ak-elev-pop: 0 0 0 1px rgba(255, 255, 255, .09), 0 24px 56px -16px rgba(0, 0, 0, .7), 0 8px 18px -8px rgba(0, 0, 0, .5);
    --ak-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);

    --ak-ink: #08090d;
    --ak-ink-2: #0e1118;

    color-scheme: dark;
}

/* the light islands keep dark text whatever the page theme */
.ak-new-ui .modal,
.ak-new-ui .datepicker,
.ak-new-ui .jconfirm {
    color: var(--ak-text-2);
}

/* page-level variables the customers view reads */
html.ak-new-ui {
    --kt-primary: #b4500b;
    --kt-primary-light: #fff4eb;
    --kt-input-border: #cfd4dc;
    --kt-radius: 10px;
}

/* ================================================================== 2 Base */
/* the root size stays the theme's (13px, 12px on small screens) so rem-based sizes are unchanged */
html.ak-new-ui,
html.ak-new-ui body {
    font-family: var(--ak-font);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.ak-new-ui {
    background: var(--ak-bg);
}

body.ak-new-ui {
    background: var(--ak-bg);
    color: var(--ak-text-2);
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01", "ss03";
}

/* a soft brand glow behind the top of every page */
@media (min-width: 1025px) {
    body.ak-new-ui .kt-wrapper {
        background: radial-gradient(1100px 420px at 92% -160px, var(--ak-bg-glow), transparent 70%) no-repeat;
    }
}

/* theme switches cross-fade instead of flashing */
html.ak-new-ui.ak-theme-anim,
html.ak-new-ui.ak-theme-anim * {
    transition: background-color 220ms var(--ak-ease), border-color 220ms var(--ak-ease), color 220ms var(--ak-ease), fill 220ms var(--ak-ease), box-shadow 220ms var(--ak-ease) !important;
}

.ak-new-ui input,
.ak-new-ui button,
.ak-new-ui select,
.ak-new-ui textarea,
.ak-new-ui .tooltip,
.ak-new-ui .popover,
.ak-new-ui .datepicker,
.ak-new-ui .swal2-popup,
.ak-new-ui .jconfirm,
.ak-new-ui .toast {
    font-family: var(--ak-font);
}

.ak-new-ui h1, .ak-new-ui h2, .ak-new-ui h3,
.ak-new-ui h4, .ak-new-ui h5, .ak-new-ui h6 {
    font-family: var(--ak-font);
    color: var(--ak-text);
    letter-spacing: -0.012em;
}

.ak-new-ui a {
    color: var(--ak-link);
    transition: color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui a:hover {
    color: var(--ak-link-hover);
}

.ak-new-ui hr {
    border-top-color: var(--ak-line);
}

.ak-new-ui ::selection {
    background: rgba(243, 127, 30, .25);
    color: var(--ak-text);
}

.ak-new-ui kbd,
.ak-new-ui .ak-kbd {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    font-family: var(--ak-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--ak-text-3);
    background: var(--ak-surface-2);
    border: 1px solid var(--ak-line-2);
    border-bottom-width: 2px;
    border-radius: var(--ak-r-1);
    box-shadow: none;
}

.ak-new-ui .text-muted,
.ak-new-ui .form-text.text-muted {
    color: var(--ak-text-3) !important;
}

.ak-new-ui .kt-font-success { color: var(--ak-success) !important; }
.ak-new-ui .kt-font-danger  { color: var(--ak-danger) !important; }
.ak-new-ui .kt-font-info    { color: var(--ak-info) !important; }
.ak-new-ui .kt-font-warning { color: var(--ak-warning) !important; }

/* ================================================================== 3 Sidebar (deep ink) */
.ak-new-ui .kt-aside,
.ak-new-ui .kt-aside-menu {
    background-color: transparent;
}

.ak-new-ui .kt-aside {
    background: linear-gradient(180deg, var(--ak-ink-2) 0%, var(--ak-ink) 42%, var(--ak-ink) 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}

.ak-new-ui .kt-aside .ps > .ps__rail-y > .ps__thumb-y,
.ak-new-ui .kt-aside .ps > .ps__rail-y > .ps__thumb-y:hover,
.ak-new-ui .kt-aside .ps > .ps__rail-y > .ps__thumb-y:focus {
    background: rgba(255, 255, 255, .16);
}

/* brand */
.ak-new-ui .kt-aside__brand {
    background: transparent;
    height: var(--ak-topbar-h);
    padding: 0 14px 0 18px;
    box-shadow: none;
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-logo a,
.ak-new-ui .kt-header-mobile .kt-header-mobile__logo a {
    display: flex;
    align-items: center;
}

.ak-new-ui .ak-brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin-right: 11px;
    padding: 3px;
    background: #fff;
    border-radius: var(--ak-r-inner);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 16px -6px rgba(243, 127, 30, .55);
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-logo img[src*="logo-light"] {
    height: 11px;
    width: auto;
    opacity: .96;
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-tools .kt-aside__brand-aside-toggler {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ak-r-inner);
    transition: background-color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-tools .kt-aside__brand-aside-toggler:hover {
    background: var(--ak-ink-hover);
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-tools .kt-aside__brand-aside-toggler svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-tools .kt-aside__brand-aside-toggler svg g [fill] {
    fill: var(--ak-ink-icon);
}

.ak-new-ui .kt-aside__brand .kt-aside__brand-tools .kt-aside__brand-aside-toggler:hover svg g [fill] {
    fill: #fff;
}

/* menu */
.ak-new-ui .kt-aside .kt-aside-menu {
    margin: 6px 0 12px;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav {
    padding: 4px 0 8px;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item {
    padding: 0 12px;
    margin: 2px 0;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--ak-r-2);
    align-items: center;
    background: transparent;
    transition: background-color var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ak-ink-text);
    letter-spacing: -0.003em;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--ak-ink-icon);
    transition: color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon svg {
    width: 19px;
    height: 19px;
    margin-left: 0;
}

/* font icons follow the item colour (the dark skin pins flaticon2 icons to one colour) */
.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon > i {
    color: inherit !important;
    font-size: 17px;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon svg g [fill] {
    fill: var(--ak-ink-icon);
    transition: fill var(--ak-dur) var(--ak-ease);
}

/* hover */
.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link {
    background-color: var(--ak-ink-hover);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-text {
    color: var(--ak-ink-text-hi);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-icon {
    color: #c7ccd6;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-icon svg g [fill] {
    fill: #c7ccd6;
}

/* active: a warm wash plus a glowing orange edge */
.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link {
    background: linear-gradient(90deg, rgba(243, 127, 30, .22) 0%, rgba(243, 127, 30, .07) 62%, rgba(243, 127, 30, 0) 100%);
    box-shadow: inset 0 0 0 1px rgba(243, 127, 30, .14);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link:before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 3px;
    height: 22px;
    margin-top: -11px;
    border-radius: 0 4px 4px 0;
    background: var(--ak-brand);
    box-shadow: var(--ak-glow);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text {
    color: #fff;
    font-weight: 600;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon {
    color: var(--ak-brand);
    filter: drop-shadow(0 0 6px rgba(243, 127, 30, .5));
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon svg g [fill] {
    fill: var(--ak-brand);
}

/* group headings in small caps */
.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__section {
    margin: 18px 0 6px;
    height: 20px;
    padding: 0 22px;
    display: flex;
    align-items: center;
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ak-ink-muted);
}

.ak-new-ui .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-icon {
    display: none;
}

/* quick-search hint at the foot of the sidebar (added by ak-admin-new.js) */
.ak-new-ui .ak-aside-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 14px;
    padding: 10px 12px;
    width: calc(100% - 24px);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ak-ink-text);
    text-align: left;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--ak-ink-line);
    border-radius: var(--ak-r-2);
    cursor: pointer;
    transition: background-color var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .ak-aside-hint:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.ak-new-ui .ak-aside-hint svg {
    flex: 0 0 16px;
    color: var(--ak-ink-icon);
}

.ak-new-ui .ak-aside-hint__text {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-new-ui .ak-aside-hint kbd {
    color: var(--ak-ink-text);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}

@media (min-width: 1025px) {
    /* collapsed: a 70px icon rail (Metronic widens it while hovered) */
    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item {
        padding: 0 10px;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
        padding: 0;
        justify-content: center;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
        flex: 0 0 auto;
        width: auto;
        justify-content: center;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link:before {
        left: -10px;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__section {
        padding: 0;
        justify-content: center;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text {
        display: none;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__section:before {
        content: "";
        width: 18px;
        height: 1px;
        background: var(--ak-ink-line);
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside__brand {
        padding: 0;
    }

    body.ak-new-ui.kt-aside--minimize .kt-aside__brand .ak-brand-mark {
        display: none;
    }

    body.ak-new-ui.kt-aside--minimize .ak-aside-hint {
        justify-content: center;
        padding: 10px 0;
    }

    body.ak-new-ui.kt-aside--minimize .ak-aside-hint .ak-aside-hint__text,
    body.ak-new-ui.kt-aside--minimize .ak-aside-hint kbd {
        display: none;
    }

    body.ak-new-ui.kt-aside--minimize-hover .kt-aside {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 24px 0 48px -12px rgba(0, 0, 0, .45);
    }
}

/* phone and tablet: the sidebar is a drawer */
@media (max-width: 1024px) {
    .ak-new-ui .kt-aside {
        box-shadow: 24px 0 48px -12px rgba(0, 0, 0, .5);
    }

    .ak-new-ui .kt-aside__brand {
        display: flex;
    }

    .ak-new-ui .kt-aside__brand .kt-aside__brand-tools {
        display: none;
    }
}

.ak-new-ui .kt-aside-close {
    background-color: rgba(255, 255, 255, .08);
    border-radius: var(--ak-r-inner);
}

.ak-new-ui .kt-aside-close > i,
.ak-new-ui .kt-aside-close i {
    color: rgba(255, 255, 255, .8);
}

.ak-new-ui .kt-aside-close:hover {
    background-color: rgba(255, 255, 255, .16);
}

.ak-new-ui .kt-aside-overlay {
    background: rgba(5, 7, 10, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ================================================================== 4 Top bar */
@media (min-width: 1025px) {
    .ak-new-ui .kt-header {
        height: var(--ak-topbar-h);
        background-color: var(--ak-overlay);
        -webkit-backdrop-filter: saturate(170%) blur(14px);
        backdrop-filter: saturate(170%) blur(14px);
        border-bottom: 1px solid var(--ak-line);
        box-shadow: none;
        transition: box-shadow var(--ak-dur) var(--ak-ease), left .3s ease;
    }

    body.ak-new-ui.ak-scrolled .kt-header {
        box-shadow: 0 8px 24px -16px rgba(15, 23, 42, .25);
    }

    /* the page header scrolls with the content, so the top bar is the only fixed strip */
    body.ak-new-ui.kt-header--fixed .kt-wrapper,
    body.ak-new-ui.kt-header--fixed.kt-subheader--fixed.kt-subheader--enabled .kt-wrapper {
        padding-top: var(--ak-topbar-h);
    }

    .ak-new-ui .kt-header .ak-crumbs {
        display: flex;
    }
}

.ak-new-ui .ak-crumbs {
    display: none;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-right: auto;
    padding-left: 28px;
    font-size: 13.5px;
    line-height: 20px;
    white-space: nowrap;
}

.ak-new-ui .ak-crumbs__root {
    color: var(--ak-text-3);
    font-weight: 500;
}

.ak-new-ui .ak-crumbs__root:hover {
    color: var(--ak-text);
}

.ak-new-ui .ak-crumbs__sep {
    color: var(--ak-line-3);
    flex: 0 0 16px;
}

.ak-new-ui .ak-crumbs__page {
    color: var(--ak-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-new-ui .kt-header__topbar {
    padding-right: 20px;
    align-items: center;
    gap: 10px;
}

/* search trigger */
.ak-new-ui .ak-topbar-search {
    align-items: center;
}

.ak-new-ui .ak-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    height: 36px;
    padding: 0 6px 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ak-text-3);
    background: var(--ak-surface);
    border: 0;
    border-radius: var(--ak-r-2);
    box-shadow: 0 0 0 1px var(--ak-line-2), var(--ak-shadow-xs);
    cursor: pointer;
    transition: box-shadow var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .ak-search-trigger:hover {
    color: var(--ak-text);
    box-shadow: 0 0 0 1px var(--ak-line-3), var(--ak-shadow-xs);
}

.ak-new-ui .ak-search-trigger__text {
    flex: 1 1 auto;
    text-align: left;
}

/* user avatar chip */
.ak-new-ui .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-wrapper {
    align-items: center;
}

.ak-new-ui .kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user {
    height: 38px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 0 0 1px transparent;
    transition: background-color var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .kt-header .kt-header__topbar .kt-header__topbar-item:hover.kt-header__topbar-item--user .kt-header__topbar-user,
.ak-new-ui .kt-header .kt-header__topbar .kt-header__topbar-item.show.kt-header__topbar-item--user .kt-header__topbar-user {
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-line-2), var(--ak-shadow-xs);
}

.ak-new-ui .kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user .kt-header__topbar-welcome {
    display: none;
}

.ak-new-ui .kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user .kt-header__topbar-username {
    order: 2;
    padding: 0 2px 0 8px;
    color: var(--ak-text);
    font-size: 13px;
    font-weight: 600;
}

.ak-new-ui .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user img {
    order: 1;
    width: 30px;
    height: 30px;
    max-height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ak-surface-3);
    box-shadow: 0 0 0 2px var(--ak-surface), 0 0 0 3px var(--ak-line-2);
}

.ak-new-ui .kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user:after {
    content: "";
    order: 3;
    width: 7px;
    height: 7px;
    margin: -3px 2px 0 6px;
    border-right: 1.5px solid var(--ak-text-3);
    border-bottom: 1.5px solid var(--ak-text-3);
    transform: rotate(45deg);
}

/* user menu */
.ak-new-ui .kt-header__topbar .dropdown-menu.dropdown-menu-xl {
    width: 300px;
    padding: 6px;
    margin-top: 8px;
}

.ak-new-ui .kt-user-card,
.ak-new-ui .kt-user-card.kt-user-card--skin-dark {
    background: transparent !important;
    padding: 12px 10px;
    border-bottom: 1px solid var(--ak-line);
    margin-bottom: 4px;
}

.ak-new-ui .kt-user-card .kt-user-card__avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ak-surface-3);
}

.ak-new-ui .kt-user-card .kt-user-card__name,
.ak-new-ui .kt-user-card.kt-user-card--skin-dark .kt-user-card__name {
    color: var(--ak-text);
    font-size: 14px;
    font-weight: 600;
    padding-left: 12px;
    line-height: 1.3;
}

.ak-new-ui .kt-user-card .kt-user-card__name:after {
    content: "Super admin";
    display: block;
    margin-top: 2px;
    color: var(--ak-text-3);
    font-size: 12px;
    font-weight: 500;
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__item {
    padding: 10px;
    border-radius: var(--ak-r-inner);
    border-bottom: 0;
    transition: background-color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__item:hover {
    background: var(--ak-surface-3);
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__item .kt-notification__item-icon i {
    color: var(--ak-text-3) !important;
    font-size: 18px;
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__item-title {
    color: var(--ak-text);
    font-size: 13px;
    font-weight: 600 !important;
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__item-time {
    color: var(--ak-text-3);
    font-size: 12px;
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__item:after {
    color: var(--ak-text-3);
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__custom {
    padding: 6px 4px 2px;
    margin-top: 4px;
    border-top: 1px solid var(--ak-line);
}

.ak-new-ui .kt-header__topbar .kt-notification .kt-notification__custom .btn {
    width: 100%;
    justify-content: center;
}

/* theme switch inside the user menu */
.ak-new-ui .ak-theme-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
}

.ak-new-ui .ak-theme-switch__label {
    color: var(--ak-text);
    font-size: 13px;
    font-weight: 600;
}

.ak-new-ui .ak-theme-switch__opts {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--ak-surface-3);
    border-radius: var(--ak-r-inner);
}

.ak-new-ui .ak-theme-switch__opts button {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ak-text-3);
    background: transparent;
    border: 0;
    border-radius: var(--ak-r-1);
    cursor: pointer;
    transition: background-color var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .ak-theme-switch__opts button:hover {
    color: var(--ak-text);
}

.ak-new-ui .ak-theme-switch__opts button[aria-pressed="true"] {
    color: var(--ak-text);
    background: var(--ak-surface);
    box-shadow: var(--ak-elev-1);
}

/* phone header */
@media (max-width: 1024px) {
    .ak-new-ui .kt-header-mobile {
        background-color: var(--ak-overlay);
        -webkit-backdrop-filter: saturate(170%) blur(14px);
        backdrop-filter: saturate(170%) blur(14px);
        border-bottom: 1px solid var(--ak-line);
        box-shadow: none;
        padding: 0 16px;
    }

    .ak-new-ui .kt-header-mobile .kt-header-mobile__logo img[src*="logo-light"] {
        height: 11px;
        width: auto;
        filter: brightness(0);
        opacity: .86;
    }

    html[data-ak-theme="dark"] .ak-new-ui .kt-header-mobile .kt-header-mobile__logo img[src*="logo-light"] {
        filter: none;
        opacity: .95;
    }

    .ak-new-ui .kt-header-mobile .ak-brand-mark {
        box-shadow: 0 0 0 1px var(--ak-line-2);
    }

    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler span,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler span::before,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler span::after {
        background: var(--ak-text-2);
    }

    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler:hover span,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler:hover span::before,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler:hover span::after,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler.kt-header-mobile__toggler--active span,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler.kt-header-mobile__toggler--active span::before,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler.kt-header-mobile__toggler--active span::after {
        background: var(--ak-brand);
    }

    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__topbar-toggler i {
        color: var(--ak-text-2);
    }

    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__topbar-toggler.kt-header-mobile__topbar-toggler--active i,
    .ak-new-ui .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__topbar-toggler:hover i {
        color: var(--ak-brand);
    }

    /* the "more" panel under the phone header: search + account */
    .ak-new-ui .kt-header__topbar {
        background-color: var(--ak-surface);
        border-bottom: 1px solid var(--ak-line);
        padding: 0 16px;
        justify-content: space-between;
    }

    .ak-new-ui .kt-header__topbar--mobile-on .kt-header__topbar {
        box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .3);
        border-top: 1px solid var(--ak-line);
    }

    .ak-new-ui .ak-topbar-search {
        flex: 1 1 auto;
    }

    .ak-new-ui .ak-search-trigger {
        width: auto;
        flex: 1 1 auto;
    }

    .ak-new-ui .ak-search-trigger .ak-kbd {
        display: none;
    }
}

/* ================================================================== 5 Page header band */
@media (min-width: 1025px) {
    body.ak-new-ui.kt-header--fixed.kt-subheader--fixed .kt-subheader {
        position: static;
        height: auto;
        background: transparent;
        box-shadow: none;
        left: auto;
        right: auto;
        top: auto;
    }

    .ak-new-ui .kt-content {
        padding: 0 0 40px;
    }

    .ak-new-ui .kt-content .kt-container,
    .ak-new-ui .kt-footer .kt-container {
        padding: 0 32px;
    }
}

.ak-new-ui .kt-subheader,
body.ak-new-ui.kt-subheader--enabled.kt-subheader--solid .kt-subheader {
    background: transparent;
    min-height: 0;
    margin: 0;
    padding: 30px 0 22px;
}

.ak-new-ui .kt-subheader .kt-container {
    align-items: flex-end;
    row-gap: 14px;
    column-gap: 24px;
}

.ak-new-ui .kt-subheader .kt-subheader__main {
    padding: 0;
    position: relative;
    flex: 1 1 380px;
    min-width: 0;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
}

.ak-new-ui .kt-subheader .kt-subheader__main .kt-subheader__title {
    order: 1;
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.024em;
    color: var(--ak-text);
}

/* the top bar shows where you are, so the page header keeps title, description and actions */
.ak-new-ui .kt-subheader .kt-subheader__main .kt-subheader__separator,
.ak-new-ui .kt-subheader .kt-subheader__main .kt-subheader__breadcrumbs {
    display: none;
}

/* description line (added by ak-admin-new.js) */
.ak-new-ui .ak-page-desc {
    order: 3;
    flex: 0 0 100%;
    margin: 0;
    color: var(--ak-text-3);
    font-size: 14px;
    line-height: 21px;
}

/* page actions: the existing buttons, moved here by ak-admin-new.js */
.ak-new-ui .kt-subheader .kt-subheader__toolbar {
    padding: 0;
    margin-left: auto;
}

.ak-new-ui .kt-subheader .kt-subheader__toolbar .kt-subheader__wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ak-new-ui .ak-page-actions,
.ak-new-ui .ak-page-actions .kt-portlet__head-actions,
.ak-new-ui .ak-page-actions form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ak-new-ui .ak-page-actions .btn + .btn {
    margin-left: 0;
}

.ak-new-ui .kt-subheader .btn {
    height: 38px !important;
    margin: 0 !important;
}

/* customers page: server clock as a chip beside the title */
.ak-new-ui .kt-subheader .server_time {
    order: 2;
    position: static;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-line-2);
    color: var(--ak-text-3);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ak-new-ui .kt-subheader .server_time:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #17b26a;
    box-shadow: 0 0 0 3px rgba(23, 178, 106, .18);
}

/* footer */
.ak-new-ui .kt-footer {
    background: transparent;
    border-top: 1px solid var(--ak-line);
    padding: 16px 0;
}

.ak-new-ui .kt-footer .kt-footer__copyright {
    color: var(--ak-text-3);
    font-size: 12px;
}

.ak-new-ui .kt-scrolltop {
    background: var(--ak-text);
    border-radius: var(--ak-r-2);
    box-shadow: var(--ak-elev-pop);
}

.ak-new-ui .kt-scrolltop i {
    color: var(--ak-bg);
}

.ak-new-ui .kt-scrolltop:hover {
    background: var(--ak-brand);
}

.ak-new-ui .kt-scrolltop:hover i {
    color: var(--ak-on-brand);
}

/* ================================================================== 6 Cards */
.ak-new-ui .kt-portlet:not(.preview-portlet) {
    background: var(--ak-surface);
    border: 0;
    border-radius: var(--ak-r-3);
    box-shadow: var(--ak-elev-1);
    margin-bottom: 24px;
}

.ak-new-ui .kt-portlet .kt-portlet__head {
    min-height: 64px;
    padding: 12px var(--ak-card-pad);
    border-bottom: 1px solid var(--ak-line);
    border-top-left-radius: var(--ak-r-3);
    border-top-right-radius: var(--ak-r-3);
    flex-wrap: wrap;
    row-gap: 12px;
    align-items: center;
}

.ak-new-ui .kt-portlet .kt-portlet__head:empty,
.ak-new-ui .kt-portlet .kt-portlet__head.ak-head-empty {
    display: none;
}

.ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-label {
    flex-wrap: wrap;
    gap: 8px 12px;
}

.ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ak-text);
}

/* filters in card heads: drop the empty label rows */
.ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-label .form-group {
    margin-bottom: 0;
}

.ak-new-ui .kt-portlet .kt-portlet__head .form-group > label:empty {
    display: none;
}

.ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-label .form-group[style*="margin-top"] {
    margin-top: 0 !important;
}

.ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-label input[style*="margin-top"] {
    margin-top: 0 !important;
}

.ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-toolbar .kt-portlet__head-actions form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ak-new-ui .kt-portlet:not(.preview-portlet) .kt-portlet__body {
    padding: var(--ak-card-pad);
}

.ak-new-ui .kt-portlet:not(.preview-portlet) .kt-portlet__foot {
    padding: 14px var(--ak-card-pad);
    border-top: 1px solid var(--ak-line);
    background: var(--ak-surface-2);
    border-bottom-left-radius: var(--ak-r-3);
    border-bottom-right-radius: var(--ak-r-3);
}

/* ================================================================== 7 Buttons */
.ak-new-ui .btn:not(.payment-status) {
    font-family: var(--ak-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    padding: 8px 14px;
    border-radius: var(--ak-r-2);
    border: 0;
    letter-spacing: -0.003em;
    box-shadow: none;
    transition: background-color var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease), transform 80ms var(--ak-ease);
}

.ak-new-ui .btn:not(.payment-status):active {
    transform: translateY(1px);
}

.ak-new-ui .btn i {
    padding-right: 6px;
}

.ak-new-ui .btn [class^="la-"],
.ak-new-ui .btn [class*=" la-"] {
    font-size: 16px;
}

.ak-new-ui .btn [class^="fa-"],
.ak-new-ui .btn [class*=" fa-"],
.ak-new-ui .btn [class^="flaticon"],
.ak-new-ui .btn [class*=" flaticon"] {
    font-size: 13px;
}

.ak-new-ui .btn.btn-sm,
.ak-new-ui .btn-group-sm > .btn {
    font-size: 12px;
    line-height: 18px;
    padding: 5px 10px;
    border-radius: var(--ak-r-inner);
}

.ak-new-ui .btn.btn-lg {
    font-size: 15px;
    padding: 11px 18px;
}

.ak-new-ui .btn.btn-wide {
    padding-left: 20px;
    padding-right: 20px;
}

.ak-new-ui .btn.btn-elevate,
.ak-new-ui .btn.btn-elevate:hover,
.ak-new-ui .btn.btn-elevate:focus {
    transform: none;
}

.ak-new-ui .btn.disabled,
.ak-new-ui .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}

.ak-new-ui .input-group > .input-group-append > .btn,
.ak-new-ui .input-group > .input-group-prepend > .btn {
    height: 38px;
}

/* primary: brand orange with ink text */
.ak-new-ui .btn.btn-primary,
.ak-new-ui .btn.btn-brand {
    color: var(--ak-on-brand);
    background: linear-gradient(180deg, var(--ak-brand-hi) 0%, var(--ak-brand) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(196, 90, 10, .55), 0 1px 2px rgba(15, 23, 42, .18);
}

.ak-new-ui .btn.btn-primary i,
.ak-new-ui .btn.btn-brand i {
    color: var(--ak-on-brand);
}

.ak-new-ui .btn.btn-primary:hover,
.ak-new-ui .btn.btn-brand:hover,
.ak-new-ui .btn.btn-primary:focus,
.ak-new-ui .btn.btn-brand:focus {
    color: var(--ak-on-brand);
    background: linear-gradient(180deg, #ffa95e 0%, #f68a2c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(196, 90, 10, .6), 0 6px 18px -6px rgba(243, 127, 30, .65);
}

.ak-new-ui .btn.btn-primary:not(:disabled):not(.disabled):active,
.ak-new-ui .btn.btn-primary:not(:disabled):not(.disabled).active,
.ak-new-ui .show > .btn.btn-primary.dropdown-toggle,
.ak-new-ui .btn.btn-brand:not(:disabled):not(.disabled):active,
.ak-new-ui .btn.btn-brand:not(:disabled):not(.disabled).active,
.ak-new-ui .show > .btn.btn-brand.dropdown-toggle {
    color: var(--ak-on-brand);
    background: var(--ak-brand-lo);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px rgba(196, 90, 10, .6);
}

/* secondary */
.ak-new-ui .btn.btn-default,
.ak-new-ui .btn.btn-secondary,
.ak-new-ui .btn.btn-light,
.ak-new-ui .btn.btn-info,
.ak-new-ui .btn.btn-outline-info,
.ak-new-ui .btn.btn-label-brand,
.ak-new-ui .btn.btn-outline-secondary {
    color: var(--ak-text);
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-line-2), var(--ak-shadow-xs);
}

.ak-new-ui .btn.btn-default i,
.ak-new-ui .btn.btn-secondary i,
.ak-new-ui .btn.btn-light i,
.ak-new-ui .btn.btn-info i,
.ak-new-ui .btn.btn-outline-info i,
.ak-new-ui .btn.btn-label-brand i,
.ak-new-ui .btn.btn-outline-secondary i {
    color: var(--ak-text-3);
}

.ak-new-ui .btn.btn-default:hover,
.ak-new-ui .btn.btn-default:focus,
.ak-new-ui .btn.btn-secondary:hover,
.ak-new-ui .btn.btn-secondary:focus,
.ak-new-ui .btn.btn-light:hover,
.ak-new-ui .btn.btn-info:hover,
.ak-new-ui .btn.btn-info:focus,
.ak-new-ui .btn.btn-outline-info:hover,
.ak-new-ui .btn.btn-label-brand:hover,
.ak-new-ui .btn.btn-outline-secondary:hover,
.ak-new-ui .show > .btn.btn-default,
.ak-new-ui .show > .btn.btn-info.dropdown-toggle,
.ak-new-ui .show > .btn.btn-secondary.dropdown-toggle,
.ak-new-ui .btn.btn-default.active,
.ak-new-ui .btn.btn-default:active,
.ak-new-ui .btn.btn-info:not(:disabled):not(.disabled):active,
.ak-new-ui .btn.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--ak-text);
    background: var(--ak-surface-2);
    box-shadow: 0 0 0 1px var(--ak-line-3), var(--ak-shadow-xs);
}

.ak-new-ui .btn.btn-default:hover i,
.ak-new-ui .btn.btn-default.active i,
.ak-new-ui .btn.btn-default:active i,
.ak-new-ui .show > .btn.btn-default i {
    color: var(--ak-text-2);
}

/* strong neutral */
.ak-new-ui .btn.btn-dark {
    color: #fff;
    background: #1b2130;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px #0c0f15;
}

.ak-new-ui .btn.btn-dark:hover,
.ak-new-ui .btn.btn-dark:focus,
.ak-new-ui .btn.btn-dark:not(:disabled):not(.disabled):active {
    color: #fff;
    background: #0c0f15;
}

html[data-ak-theme="dark"] .ak-new-ui .btn.btn-dark {
    background: #2a3142;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* success */
.ak-new-ui .btn.btn-success {
    color: #fff;
    background: #067647;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px #055e39;
}

.ak-new-ui .btn.btn-success:hover,
.ak-new-ui .btn.btn-success:focus,
.ak-new-ui .btn.btn-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background: #05603a;
}

/* destructive */
.ak-new-ui .btn.btn-danger,
.ak-new-ui .btn-cancel-request {
    color: #fff !important;
    background: #dc2626;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px #b91c1c;
}

.ak-new-ui .btn.btn-danger:hover,
.ak-new-ui .btn.btn-danger:focus,
.ak-new-ui .btn.btn-danger:not(:disabled):not(.disabled):active {
    color: #fff;
    background: #c81e1e;
}

.ak-new-ui .btn.btn-outline-danger {
    color: var(--ak-danger);
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-danger-line);
}

.ak-new-ui .btn.btn-outline-danger:hover,
.ak-new-ui .btn.btn-outline-danger:focus {
    color: var(--ak-danger);
    background: var(--ak-danger-soft);
}

.ak-new-ui .btn.btn-outline-primary {
    color: var(--ak-accent-text);
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px rgba(243, 127, 30, .45);
}

.ak-new-ui .btn.btn-outline-primary:hover,
.ak-new-ui .btn.btn-outline-primary:focus {
    color: var(--ak-accent-text);
    background: var(--ak-accent-soft);
}

/* warning */
.ak-new-ui .btn.btn-warning,
.ak-new-ui .btn.btn-outline-warning {
    color: var(--ak-warning);
    background: var(--ak-warning-soft);
    box-shadow: 0 0 0 1px var(--ak-warning-line);
}

.ak-new-ui .btn.btn-warning:hover,
.ak-new-ui .btn.btn-outline-warning:hover {
    color: var(--ak-warning);
    filter: brightness(.97);
}

/* soft filter chips */
.ak-new-ui .btn.btn-label-success,
.ak-new-ui .btn.btn-label-primary,
.ak-new-ui .btn.btn-label-info {
    color: var(--ak-text-2);
    background: var(--ak-surface-3);
    box-shadow: none;
}

.ak-new-ui .btn.btn-label-success:hover,
.ak-new-ui .btn.btn-label-success:focus,
.ak-new-ui .show > .btn.btn-label-success,
.ak-new-ui .btn.btn-label-primary:hover,
.ak-new-ui .btn.btn-label-info:hover {
    color: var(--ak-text);
    background: var(--ak-line-2);
}

/* ghost icon buttons; the row menu becomes a vertical kebab */
.ak-new-ui .btn.btn-clean {
    color: var(--ak-text-3);
    background: transparent;
    box-shadow: none;
}

.ak-new-ui .btn.btn-clean i {
    color: var(--ak-text-3);
}

.ak-new-ui .show > .btn.btn-clean,
.ak-new-ui .btn.btn-clean.active,
.ak-new-ui .btn.btn-clean:active,
.ak-new-ui .btn.btn-clean:hover {
    color: var(--ak-text);
    background: var(--ak-surface-3);
}

.ak-new-ui .show > .btn.btn-clean i,
.ak-new-ui .btn.btn-clean:hover i {
    color: var(--ak-text);
}

.ak-new-ui .btn.btn-clean .la-ellipsis-h {
    transform: rotate(90deg);
}

.ak-new-ui .btn.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.ak-new-ui .btn.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.ak-new-ui .btn.btn-icon i {
    padding: 0;
}

.ak-new-ui .btn.btn-icon.btn-icon-md [class^="la-"],
.ak-new-ui .btn.btn-icon.btn-icon-md [class*=" la-"] {
    font-size: 18px;
}

/* invoice preview close button stays round */
.ak-new-ui .btn.btn-close-view-invoice {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.ak-new-ui .btn.kt-spinner:before {
    border-color: currentColor;
    border-right-color: transparent;
}

/* ================================================================== 8 Forms */
.ak-new-ui label,
.ak-new-ui .col-form-label,
.ak-new-ui .form-control-label {
    color: var(--ak-text-2);
    font-size: 13px;
    font-weight: 500;
}

.ak-new-ui .form-group {
    margin-bottom: 16px;
}

.ak-new-ui .form-group label {
    margin-bottom: 6px;
}

.ak-new-ui .form-control {
    font-family: var(--ak-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--ak-text);
    background-color: var(--ak-input);
    border: 1px solid var(--ak-line-2);
    border-radius: var(--ak-r-2);
    padding: 8px 12px;
    box-shadow: var(--ak-shadow-xs);
    transition: border-color var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease), background-color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui input.form-control:not([type="file"]),
.ak-new-ui select.form-control:not([multiple]):not([size]) {
    height: 38px;
}

.ak-new-ui select.form-control:not([multiple]):not([size]) {
    padding-right: 32px;
}

.ak-new-ui .form-control.form-control-sm,
.ak-new-ui .input-group-sm > .form-control {
    height: 34px !important;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: var(--ak-r-inner);
}

.ak-new-ui .form-control:hover {
    border-color: var(--ak-line-3);
}

.ak-new-ui .form-control:focus {
    color: var(--ak-text);
    background-color: var(--ak-input);
    border-color: var(--ak-brand);
    box-shadow: var(--ak-ring);
    outline: 0;
}

.ak-new-ui .form-control::placeholder {
    color: var(--ak-placeholder);
    opacity: 1;
}

.ak-new-ui .form-control:disabled,
.ak-new-ui .form-control[readonly] {
    background-color: var(--ak-surface-2);
    color: var(--ak-text-2);
}

.ak-new-ui .form-control[readonly][id*="date"] {
    background-color: var(--ak-input);
    cursor: pointer;
}

.ak-new-ui textarea.form-control {
    min-height: 88px;
}

.ak-new-ui input[type="file"].form-control {
    box-shadow: none;
    height: auto;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--ak-text-2);
}

.ak-new-ui select.form-control option {
    color: var(--ak-text);
    background: var(--ak-surface);
}

.ak-new-ui .form-control.is-invalid,
.ak-new-ui .was-validated .form-control:invalid {
    border-color: var(--ak-danger-line);
}

.ak-new-ui label.error,
.ak-new-ui span.error,
.ak-new-ui .invalid-feedback {
    display: block;
    margin-top: 6px;
    color: var(--ak-danger);
    font-size: 12px;
    font-weight: 500;
}

.ak-new-ui .form-text {
    font-size: 12px;
    margin-top: 6px;
}

.ak-new-ui .input-group-text {
    font-size: 13px;
    color: var(--ak-text-3);
    background-color: var(--ak-surface-2);
    border-color: var(--ak-line-2);
    border-radius: var(--ak-r-2);
}

.ak-new-ui .input-group > .form-control {
    box-shadow: none;
}

/* checkboxes and radios: orange with an ink mark */
.ak-new-ui .kt-checkbox,
.ak-new-ui .kt-radio {
    font-size: 13px;
    color: var(--ak-text-2);
    padding-left: 26px;
}

.ak-new-ui .kt-checkbox > span,
.ak-new-ui .kt-radio > span {
    width: 17px;
    height: 17px;
    top: 1px;
    background: var(--ak-input);
    border: 1px solid var(--ak-line-3) !important;
    box-shadow: var(--ak-shadow-xs);
    transition: background-color var(--ak-dur) var(--ak-ease), border-color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .kt-checkbox > span {
    border-radius: 5px;
}

.ak-new-ui .kt-checkbox > span:after {
    border-color: var(--ak-on-brand) !important;
    margin-left: -2px;
    margin-top: -6px;
    width: 5px;
    height: 9px;
}

.ak-new-ui .kt-checkbox > input:checked ~ span {
    background: var(--ak-brand);
    border-color: var(--ak-brand-lo) !important;
}

.ak-new-ui .kt-radio > input:checked ~ span {
    background: var(--ak-input);
    border-color: var(--ak-brand) !important;
}

.ak-new-ui .kt-radio > span:after {
    background: var(--ak-brand);
    border-color: var(--ak-brand);
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
}

.ak-new-ui .kt-checkbox > input:focus-visible ~ span,
.ak-new-ui .kt-radio > input:focus-visible ~ span {
    box-shadow: var(--ak-ring);
}

.ak-new-ui .kt-checkbox.kt-checkbox--single {
    width: 17px;
    height: 17px;
    padding-left: 17px;
}

/* page-level switches and option cards (customers page) */
.ak-new-ui .container-toogle .checkmark-toggle,
.ak-new-ui .custom-switch .slider {
    background-color: var(--ak-line-3);
}

.ak-new-ui .container-toogle input:checked + .checkmark-toggle,
.ak-new-ui .custom-switch input:checked + .slider {
    background-color: var(--ak-brand);
}

.ak-new-ui .container-toogle input:focus-visible + .checkmark-toggle,
.ak-new-ui .custom-switch input:focus-visible + .slider {
    box-shadow: var(--ak-ring);
}

/* select2 */
.ak-new-ui .select2-container--default .select2-selection--single,
.ak-new-ui .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid var(--ak-line-2);
    border-radius: var(--ak-r-2);
    background: var(--ak-input);
    box-shadow: var(--ak-shadow-xs);
}

.ak-new-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 8px 32px 8px 12px;
    line-height: 20px;
    font-size: 14px;
    color: var(--ak-text);
}

.ak-new-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: var(--ak-text-3);
}

.ak-new-ui .select2-container--default.select2-container--focus .select2-selection--single,
.ak-new-ui .select2-container--default.select2-container--focus .select2-selection--multiple,
.ak-new-ui .select2-container--default.select2-container--open .select2-selection--single,
.ak-new-ui .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ak-brand);
    box-shadow: var(--ak-ring);
}

.ak-new-ui .select2-dropdown {
    background: var(--ak-surface);
    border: 0;
    border-radius: var(--ak-r-3);
    box-shadow: var(--ak-elev-pop);
    overflow: hidden;
    padding: 4px;
}

.ak-new-ui .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--ak-text);
    background: var(--ak-input);
    border: 1px solid var(--ak-line-2);
    border-radius: var(--ak-r-inner);
    padding: 7px 10px;
}

.ak-new-ui .select2-container--default .select2-results__option {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ak-text-2);
    border-radius: var(--ak-r-1);
}

.ak-new-ui .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--ak-surface-3);
    color: var(--ak-text);
}

.ak-new-ui .select2-container--default .select2-results__option--highlighted[aria-selected],
.ak-new-ui .select2-container--default .select2-results__option.select2-results__option--highlighted {
    background-color: var(--ak-accent-soft);
    color: var(--ak-text);
}

/* bootstrap-select (time zone pickers) */
.ak-new-ui .bootstrap-select > .dropdown-toggle.btn-light,
.ak-new-ui .bootstrap-select > .dropdown-toggle.btn-secondary {
    height: 38px;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ak-text);
    background: var(--ak-input);
    border: 1px solid var(--ak-line-2);
    border-radius: var(--ak-r-2);
    box-shadow: var(--ak-shadow-xs);
}

.ak-new-ui .bootstrap-select > .dropdown-toggle.btn-light:focus,
.ak-new-ui .bootstrap-select.show > .dropdown-toggle.btn-light {
    border-color: var(--ak-brand) !important;
    box-shadow: var(--ak-ring) !important;
}

.ak-new-ui .bootstrap-select .dropdown-menu li a {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: var(--ak-r-1);
}

.ak-new-ui .bootstrap-select .dropdown-menu li.selected a,
.ak-new-ui .bootstrap-select .dropdown-menu li.active a,
.ak-new-ui .bootstrap-select .dropdown-menu li a:hover {
    background: var(--ak-accent-soft);
    color: var(--ak-text);
}

/* date picker (a light island in dark mode) */
.ak-new-ui .datepicker {
    border-radius: var(--ak-r-3);
    padding: 8px;
    background: var(--ak-surface);
}

.ak-new-ui .datepicker.dropdown-menu {
    border: 0;
    box-shadow: var(--ak-elev-pop);
}

.ak-new-ui .datepicker table tr td,
.ak-new-ui .datepicker table tr th {
    border-radius: var(--ak-r-inner);
    font-size: 13px;
}

.ak-new-ui .datepicker tbody tr > td.day.today {
    background: var(--ak-surface-3);
    color: var(--ak-text);
}

.ak-new-ui .datepicker tbody tr > td.day.today:before {
    border-bottom-color: var(--ak-brand);
}

.ak-new-ui .datepicker tbody tr > td.day.selected,
.ak-new-ui .datepicker tbody tr > td.day.selected:hover,
.ak-new-ui .datepicker tbody tr > td.day.active,
.ak-new-ui .datepicker tbody tr > td.day.active:hover,
.ak-new-ui .datepicker table tr td span.active,
.ak-new-ui .datepicker table tr td span.active:hover {
    background: var(--ak-brand);
    color: var(--ak-on-brand);
}

/* ================================================================== 9 Data grid */
.ak-new-ui .table:not([id="item_table"]) {
    color: var(--ak-text-2);
    font-size: 13.5px;
    background: transparent;
}

.ak-new-ui .table:not([id="item_table"]) thead th {
    background: var(--ak-surface-2);
    color: var(--ak-text-3);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 11px 12px;
    border-top: 1px solid var(--ak-line);
    border-bottom: 1px solid var(--ak-line);
    white-space: normal;
}

.ak-new-ui .table:not([id="item_table"]) td {
    padding: 14px 12px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--ak-line);
    color: var(--ak-text-2);
    font-variant-numeric: tabular-nums;
}

.ak-new-ui .table:not([id="item_table"]) tbody tr:last-child td {
    border-bottom: 0;
}

/* no vertical rules, no outer box */
.ak-new-ui .table:not([id="item_table"]).table-bordered,
.ak-new-ui .table:not([id="item_table"]).table-bordered td,
.ak-new-ui .table:not([id="item_table"]).table-bordered th {
    border-left: 0;
    border-right: 0;
}

.ak-new-ui .table:not([id="item_table"]).table-bordered {
    border-top: 0;
    border-bottom: 0;
}

.ak-new-ui .table:not([id="item_table"]) tbody tr {
    transition: background-color 120ms var(--ak-ease);
}

.ak-new-ui .table-hover:not([id="item_table"]) tbody tr:hover,
.ak-new-ui .table:not([id="item_table"]).table-hover tbody tr:hover td {
    background-color: var(--ak-surface-2);
    color: var(--ak-text);
}

.ak-new-ui .table-striped:not([id="item_table"]) tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

/* links in rows read as names, orange on hover */
.ak-new-ui .table:not([id="item_table"]) td a:not(.btn):not(.dropdown-item) {
    color: var(--ak-text);
    font-weight: 600;
    text-decoration: none;
}

.ak-new-ui .table:not([id="item_table"]) td a:not(.btn):not(.dropdown-item):hover {
    color: var(--ak-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* numeric columns (marked by ak-admin-new.js) */
.ak-new-ui .table th.ak-num,
.ak-new-ui .table td.ak-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* the grid runs edge to edge inside its card */
.ak-new-ui .kt-portlet__body .dataTables_wrapper,
.ak-new-ui .kt-portlet__body .table-responsive {
    margin-left: calc(-1 * var(--ak-card-pad));
    margin-right: calc(-1 * var(--ak-card-pad));
    width: auto;
}

.ak-new-ui .kt-portlet__body .table-responsive .dataTables_wrapper {
    margin-left: 0;
    margin-right: 0;
}

.ak-new-ui .kt-portlet__body .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

.ak-new-ui .kt-portlet__body .dataTables_wrapper > .row > [class*="col-"] {
    padding-left: var(--ak-card-pad);
    padding-right: var(--ak-card-pad);
}

/* DataTables' bootstrap CSS zeroes the outer column padding inside .table-responsive; put it back */
.ak-new-ui .kt-portlet__body .table-responsive > .dataTables_wrapper > .row > [class*="col-"] {
    padding-left: var(--ak-card-pad);
    padding-right: var(--ak-card-pad);
}

.ak-new-ui .kt-portlet__body .dataTables_wrapper > .row > .col-sm-12:only-child,
.ak-new-ui .kt-portlet__body .table-responsive > .dataTables_wrapper > .row > .col-sm-12:only-child {
    padding-left: 0;
    padding-right: 0;
}

.ak-new-ui .kt-portlet__body .dataTables_wrapper table.dataTable thead th:first-child,
.ak-new-ui .kt-portlet__body .dataTables_wrapper table.dataTable tbody td:first-child {
    padding-left: var(--ak-card-pad);
}

.ak-new-ui .kt-portlet__body .dataTables_wrapper table.dataTable thead th:last-child,
.ak-new-ui .kt-portlet__body .dataTables_wrapper table.dataTable tbody td:last-child {
    padding-right: var(--ak-card-pad);
}

/* Responsive keeps its room for the expand control in the first cell */
.ak-new-ui .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child {
    padding-left: calc(var(--ak-card-pad) + 24px);
}

.ak-new-ui .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
    left: calc(var(--ak-card-pad) - 2px);
}

.ak-new-ui .dataTables_wrapper .dataTable {
    margin: 0 !important;
}

.ak-new-ui .dataTables_wrapper .dataTable th,
.ak-new-ui .dataTables_wrapper .dataTable td {
    color: inherit;
}

.ak-new-ui .dataTables_wrapper .dataTable td {
    color: var(--ak-text-2);
}

.ak-new-ui .dataTables_wrapper .dataTable thead th {
    color: var(--ak-text-3);
}

/* sort indicators: quiet glyphs, the active one in orange */
.ak-new-ui table.dataTable thead > tr > th.sorting,
.ak-new-ui table.dataTable thead > tr > th.sorting_asc,
.ak-new-ui table.dataTable thead > tr > th.sorting_desc {
    padding-right: 26px;
    cursor: pointer;
}

.ak-new-ui .dataTables_wrapper .dataTable th.sorting:before,
.ak-new-ui .dataTables_wrapper .dataTable th.sorting:after,
.ak-new-ui .dataTables_wrapper .dataTable th.sorting_asc:before,
.ak-new-ui .dataTables_wrapper .dataTable th.sorting_asc:after,
.ak-new-ui .dataTables_wrapper .dataTable th.sorting_desc:before,
.ak-new-ui .dataTables_wrapper .dataTable th.sorting_desc:after {
    bottom: 50% !important;
    transform: translateY(50%);
    font-size: 10px;
    line-height: 1;
    opacity: .28;
}

.ak-new-ui table.dataTable thead .sorting:hover:before,
.ak-new-ui table.dataTable thead .sorting:hover:after {
    opacity: .6;
}

.ak-new-ui table.dataTable thead .sorting_asc,
.ak-new-ui table.dataTable thead .sorting_desc {
    color: var(--ak-text);
}

.ak-new-ui table.dataTable thead .sorting_asc:before,
.ak-new-ui table.dataTable thead .sorting_desc:after {
    color: var(--ak-brand);
    opacity: 1;
}

/* sticky column headings while the page scrolls (tables sitting straight in a card) */
@media (min-width: 1025px) {
    .ak-new-ui #kt_content .kt-portlet__body > .dataTables_wrapper > .row > .col-sm-12 > table.dataTable > thead > tr > th {
        position: sticky;
        top: var(--ak-topbar-h);
        z-index: 3;
        /* the 1px side shadow paints over sub-pixel seams between sticky cells */
        box-shadow: 1px 0 0 var(--ak-surface-2), 0 1px 0 var(--ak-line);
    }
}

/* toolbar above the grid: search and extra filters */
.ak-new-ui .kt-portlet__body .dataTables_wrapper > .row:first-child {
    padding: 2px 0 14px;
}

.ak-new-ui .ak-grid .ak-grid-top > .ak-col-empty {
    display: none;
}

.ak-new-ui .ak-grid .ak-grid-top > [class*="col-"] {
    flex: 1 1 auto;
    max-width: 100%;
}

.ak-new-ui div.dataTables_wrapper div.dataTables_length label,
.ak-new-ui div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ak-text-3);
    font-size: 13px;
    font-weight: 500;
}

.ak-new-ui div.dataTables_wrapper div.dataTables_length select {
    height: 32px !important;
    min-width: 70px;
    padding: 4px 28px 4px 10px;
    font-weight: 600;
}

.ak-new-ui div.dataTables_wrapper div.dataTables_filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.ak-new-ui div.dataTables_wrapper div.dataTables_filter input {
    height: 36px !important;
    width: 240px;
    max-width: 100%;
    margin-left: 0;
    padding: 6px 12px 6px 34px;
    border-radius: var(--ak-r-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 15px 15px;
}

.ak-new-ui div.dataTables_wrapper div.dataTables_filter select.form-control,
.ak-new-ui div.dataTables_wrapper div.dataTables_filter .form-control-sm:not(input) {
    height: 36px !important;
    width: auto;
}

.ak-new-ui div.dataTables_wrapper div.dataTables_filter .form-control-label {
    margin: 0 !important;
    color: var(--ak-text-3);
    font-size: 13px;
}

/* footer under the grid: rows per page + "1-10 of 57" + pager */
.ak-new-ui .kt-portlet__body .dataTables_wrapper > .row:last-child {
    padding: 14px 0 2px;
    align-items: center;
}

.ak-new-ui .ak-grid .ak-grid-foot > [class*="col-"]:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.ak-new-ui .ak-grid .ak-grid-foot div.dataTables_length {
    margin: 0;
}

.ak-new-ui .dataTables_wrapper .dataTables_info,
.ak-new-ui div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
    color: var(--ak-text-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ak-new-ui .dataTables_info strong {
    color: var(--ak-text);
    font-weight: 600;
}

.ak-new-ui .dataTables_wrapper .dataTables_paginate .pagination {
    gap: 4px;
    margin: 0;
}

.ak-new-ui .dataTables_wrapper .dataTables_paginate .pagination .page-item {
    margin-left: 0;
}

.ak-new-ui .dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item > .page-link {
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--ak-text-2);
    background: transparent;
    border: 0;
    border-radius: var(--ak-r-inner);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .dataTables_wrapper .pagination .page-item.previous > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item.next > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item.first > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item.last > .page-link {
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-line-2);
}

.ak-new-ui .dataTables_wrapper .pagination .page-item:hover > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item.previous > .page-link:hover,
.ak-new-ui .dataTables_wrapper .pagination .page-item.next > .page-link:hover,
.ak-new-ui .dataTables_wrapper .pagination .page-item.first > .page-link:hover,
.ak-new-ui .dataTables_wrapper .pagination .page-item.last > .page-link:hover {
    background: var(--ak-surface-3);
    color: var(--ak-text);
}

.ak-new-ui .dataTables_wrapper .pagination .page-item.active > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item.active:hover > .page-link {
    background: var(--ak-text);
    color: var(--ak-surface);
}

.ak-new-ui .dataTables_wrapper .pagination .page-item.disabled > .page-link,
.ak-new-ui .dataTables_wrapper .pagination .page-item.disabled:hover > .page-link {
    opacity: .4;
    background: transparent;
    color: var(--ak-text-3);
}

/* loading: a slim moving bar, plus shimmering rows while the grid is still empty */
.ak-new-ui div.dataTables_wrapper div.dataTables_processing {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    color: transparent;
    background: linear-gradient(90deg, transparent 0%, var(--ak-brand) 45%, var(--ak-brand-hi) 55%, transparent 100%) no-repeat;
    background-size: 40% 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 5;
    animation: ak-progress 1.1s var(--ak-ease) infinite;
}

@keyframes ak-progress {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

.ak-new-ui .dataTables_wrapper.ak-grid-loading table.dataTable > tbody {
    opacity: .55;
    transition: opacity 120ms var(--ak-ease);
}

.ak-new-ui .dataTables_wrapper.ak-grid-empty-loading table.dataTable:after {
    content: "";
    display: table-caption;
    caption-side: bottom;
    height: 312px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%) no-repeat,
        repeating-linear-gradient(180deg, transparent 0 18px, var(--ak-surface-3) 18px 30px, transparent 30px 52px);
    background-size: 50% 100%, calc(100% - 2 * var(--ak-card-pad)) 100%;
    background-position: -50% 0, var(--ak-card-pad) 0;
    animation: ak-shimmer 1.3s linear infinite;
}

html[data-ak-theme="dark"] .ak-new-ui .dataTables_wrapper.ak-grid-empty-loading table.dataTable:after {
    background:
        linear-gradient(90deg, rgba(18, 21, 28, 0) 0%, rgba(255, 255, 255, .06) 50%, rgba(18, 21, 28, 0) 100%) no-repeat,
        repeating-linear-gradient(180deg, transparent 0 18px, var(--ak-surface-3) 18px 30px, transparent 30px 52px);
    background-size: 50% 100%, calc(100% - 2 * var(--ak-card-pad)) 100%;
    background-position: -50% 0, var(--ak-card-pad) 0;
}

@keyframes ak-shimmer {
    0%   { background-position: -50% 0, var(--ak-card-pad) 0; }
    100% { background-position: 150% 0, var(--ak-card-pad) 0; }
}

/* empty result: an inbox mark above the message (a background, since Responsive hides :before here) */
.ak-new-ui table.dataTable td.dataTables_empty {
    padding: 112px 16px 52px !important;
    color: var(--ak-text-3);
    font-size: 14px;
    font-weight: 500;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect x='.5' y='.5' width='43' height='43' rx='12' fill='%23f37f1e' fill-opacity='.10' stroke='%23f37f1e' stroke-opacity='.25'/%3E%3Cg transform='translate(12 12) scale(.8333)' fill='none' stroke='%23e06d0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center 52px;
}

/* responsive child rows */
.ak-new-ui .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
.ak-new-ui .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before {
    color: var(--ak-brand);
}

.ak-new-ui .dataTables_wrapper .child {
    background: var(--ak-surface-2);
}

.ak-new-ui .dataTables_wrapper .child .dtr-details > li .dtr-title {
    color: var(--ak-text-3);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom-color: var(--ak-line);
}

.ak-new-ui .dataTables_wrapper .child .dtr-details > li .dtr-data {
    color: var(--ak-text-2);
    border-bottom-color: var(--ak-line);
}

/* ================================================================== 10 Badges and statuses */
.ak-new-ui .kt-badge.kt-badge--inline,
.ak-new-ui .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    border: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.ak-new-ui .kt-badge.kt-badge--warning,
.ak-new-ui .badge-warning {
    color: var(--ak-warning);
    background: var(--ak-warning-soft);
    box-shadow: inset 0 0 0 1px var(--ak-warning-line);
}

.ak-new-ui .kt-badge.kt-badge--info,
.ak-new-ui .badge-info {
    color: var(--ak-info);
    background: var(--ak-info-soft);
    box-shadow: inset 0 0 0 1px var(--ak-info-line);
}

.ak-new-ui .kt-badge.kt-badge--success,
.ak-new-ui .badge-success {
    color: var(--ak-success);
    background: var(--ak-success-soft);
    box-shadow: inset 0 0 0 1px var(--ak-success-line);
}

.ak-new-ui .kt-badge.kt-badge--danger,
.ak-new-ui .badge-danger {
    color: var(--ak-danger);
    background: var(--ak-danger-soft);
    box-shadow: inset 0 0 0 1px var(--ak-danger-line);
}

.ak-new-ui .badge-primary,
.ak-new-ui .kt-badge.kt-badge--brand,
.ak-new-ui .kt-badge.kt-badge--primary {
    color: var(--ak-accent-text);
    background: var(--ak-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(243, 127, 30, .3);
}

.ak-new-ui .kt-badge.kt-badge--inline:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ak-new-ui .table a .badge,
.ak-new-ui .table a .kt-badge {
    margin-left: 6px;
}

/* PAID / DUE in the invoice grid become pills */
.ak-new-ui .dataTable td > span.kt-font-success:only-child,
.ak-new-ui .dataTable td > span.kt-font-danger:only-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 600 !important;
    border-radius: 999px;
}

.ak-new-ui .dataTable td > span.kt-font-success:only-child {
    background: var(--ak-success-soft);
    box-shadow: inset 0 0 0 1px var(--ak-success-line);
}

.ak-new-ui .dataTable td > span.kt-font-danger:only-child {
    background: var(--ak-danger-soft);
    box-shadow: inset 0 0 0 1px var(--ak-danger-line);
}

.ak-new-ui .dataTable td > span.kt-font-success:only-child:before,
.ak-new-ui .dataTable td > span.kt-font-danger:only-child:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* status switches in rows (Active / Inactive, Enable / Disable): a compact pill switch */
.ak-new-ui .table:not([id="item_table"]) #add_settings .btn-group,
.ak-new-ui .table:not([id="item_table"]) .btn-group[data-toggle="buttons"] {
    padding: 2px;
    gap: 2px;
    background: var(--ak-surface-3);
    border-radius: 999px;
}

.ak-new-ui .table:not([id="item_table"]) #add_settings .btn-group > label.btn,
.ak-new-ui .table:not([id="item_table"]) .btn-group[data-toggle="buttons"] > label.btn {
    margin: 0;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    border: 0;
    border-radius: 999px !important;
    background: transparent;
    color: var(--ak-text-3);
    box-shadow: none;
}

.ak-new-ui .table:not([id="item_table"]) #add_settings .btn-group > label.btn.btn-default:hover,
.ak-new-ui .table:not([id="item_table"]) .btn-group[data-toggle="buttons"] > label.btn.btn-default:hover {
    color: var(--ak-text);
    background: transparent;
    border-color: transparent;
}

.ak-new-ui .table:not([id="item_table"]) #add_settings .btn-group > label.btn.btn-primary,
.ak-new-ui .table:not([id="item_table"]) .btn-group[data-toggle="buttons"] > label.btn.btn-primary {
    color: var(--ak-success);
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-success-line), var(--ak-shadow-xs);
}

.ak-new-ui .table:not([id="item_table"]) #add_settings .btn-group > label.btn.btn-danger,
.ak-new-ui .table:not([id="item_table"]) .btn-group[data-toggle="buttons"] > label.btn.btn-danger {
    color: var(--ak-danger) !important;
    background: var(--ak-surface);
    box-shadow: 0 0 0 1px var(--ak-danger-line), var(--ak-shadow-xs);
}

/* ================================================================== 11 Menus, tabs, pills */
.ak-new-ui .dropdown-menu {
    padding: 6px;
    font-size: 13px;
    color: var(--ak-text-2);
    background: var(--ak-surface);
    border: 0;
    border-radius: var(--ak-r-3);
    box-shadow: var(--ak-elev-pop);
}

.ak-new-ui .dropdown-menu > .dropdown-item,
.ak-new-ui .dropdown-menu > li > a:not(.btn) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ak-r-inner);
    color: var(--ak-text-2);
    font-weight: 500;
    transition: background-color 120ms var(--ak-ease), color 120ms var(--ak-ease);
}

.ak-new-ui .dropdown-menu > .dropdown-item i {
    width: 16px;
    color: var(--ak-text-3);
    font-size: 15px;
    text-align: center;
}

.ak-new-ui .dropdown-menu > .dropdown-item i[class*="fa-"] {
    font-size: 13px;
}

.ak-new-ui .dropdown-menu > .dropdown-item i[class*="la-"],
.ak-new-ui .dropdown-menu > .dropdown-item i[class*="flaticon"] {
    font-size: 16px;
}

.ak-new-ui .dropdown-menu > .dropdown-item:hover,
.ak-new-ui .dropdown-menu > .dropdown-item:focus,
.ak-new-ui .dropdown-menu > li > a:not(.btn):hover {
    background: var(--ak-surface-3);
    color: var(--ak-text);
}

.ak-new-ui .dropdown-menu > .dropdown-item.active,
.ak-new-ui .dropdown-menu > .dropdown-item:active {
    background: var(--ak-accent-soft);
    color: var(--ak-text);
}

/* destructive row actions read red */
.ak-new-ui .dropdown-menu > .dropdown-item[class*="delete"],
.ak-new-ui .dropdown-menu > .dropdown-item[class*="cancel"] {
    color: var(--ak-danger);
}

.ak-new-ui .dropdown-menu > .dropdown-item[class*="delete"] i,
.ak-new-ui .dropdown-menu > .dropdown-item[class*="cancel"] i {
    color: var(--ak-danger);
}

.ak-new-ui .dropdown-menu > .dropdown-item[class*="delete"]:hover,
.ak-new-ui .dropdown-menu > .dropdown-item[class*="cancel"]:hover {
    background: var(--ak-danger-soft);
    color: var(--ak-danger);
}

/* Metronic nav lists in dropdowns (dashboard period filters) */
.ak-new-ui .kt-nav {
    padding: 0;
}

.ak-new-ui .kt-nav .kt-nav__item > .kt-nav__link {
    padding: 8px 10px;
    border-radius: var(--ak-r-inner);
}

.ak-new-ui .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-text {
    color: var(--ak-text-2);
    font-size: 13px;
    font-weight: 500;
}

.ak-new-ui .kt-nav .kt-nav__item > .kt-nav__link:hover,
.ak-new-ui .kt-nav .kt-nav__item > .kt-nav__link.active {
    background: var(--ak-surface-3) !important;
}

.ak-new-ui .kt-nav .kt-nav__item > .kt-nav__link.active .kt-nav__link-text {
    color: var(--ak-text) !important;
    font-weight: 600;
}

/* tabs */
.ak-new-ui .nav-tabs {
    border-bottom: 1px solid var(--ak-line);
    gap: 4px;
}

.ak-new-ui .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 10px 12px;
    color: var(--ak-text-3);
    font-weight: 500;
    background: transparent;
}

.ak-new-ui .nav-tabs .nav-link:hover {
    color: var(--ak-text);
}

.ak-new-ui .nav-tabs .nav-link.active,
.ak-new-ui .nav-tabs .nav-item.show .nav-link {
    color: var(--ak-text);
    background: transparent;
    border-bottom-color: var(--ak-brand);
    font-weight: 600;
}

/* pills and filter groups (Bulk Cancel tabs, FAQ Pre / Post) as segmented controls */
.ak-new-ui .nav-pills,
.ak-new-ui .btn-group.filter-group {
    padding: 3px;
    gap: 3px;
    background: var(--ak-surface-3);
    border: 0;
    border-radius: var(--ak-r-2);
}

.ak-new-ui .nav-pills .nav-item {
    margin: 0;
    border-left: 0 !important; /* the Bulk Cancel view draws an inline divider */
}

.ak-new-ui .nav-pills .nav-item .nav-link,
.ak-new-ui .btn-group.filter-group .btn.filter-btn {
    padding: 7px 14px;
    color: var(--ak-text-3);
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: var(--ak-r-inner) !important;
    box-shadow: none;
    transform: none;
}

.ak-new-ui .nav-pills .nav-item .nav-link:hover,
.ak-new-ui .btn-group.filter-group .btn.filter-btn:hover {
    color: var(--ak-text);
    transform: none;
}

.ak-new-ui .nav-pills .nav-item .nav-link:active,
.ak-new-ui .nav-pills .nav-item .nav-link.active,
.ak-new-ui .nav-pills .nav-item .nav-link.active:hover,
.ak-new-ui .btn-group.filter-group .btn.filter-btn.active {
    color: var(--ak-text);
    background: var(--ak-surface);
    box-shadow: var(--ak-elev-1);
}

/* ================================================================== 12 Modals (light islands in dark mode) */
.ak-new-ui .modal-backdrop.show {
    opacity: 1;
    background-color: rgba(8, 10, 14, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.ak-new-ui .modal .modal-content {
    color: var(--ak-text-2);
    background: var(--ak-surface);
    border: 0;
    border-radius: var(--ak-r-4);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 32px 64px -16px rgba(8, 10, 14, .45);
}

.ak-new-ui .modal.fade .modal-dialog {
    transition: transform 200ms var(--ak-ease), opacity 200ms var(--ak-ease);
    transform: translateY(8px) scale(.985);
}

.ak-new-ui .modal.show .modal-dialog {
    transform: none;
}

.ak-new-ui .modal .modal-content .modal-header {
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ak-line);
    background: transparent;
    border-top-left-radius: var(--ak-r-4);
    border-top-right-radius: var(--ak-r-4);
}

.ak-new-ui .modal .modal-content .modal-header .modal-title {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ak-text);
}

.ak-new-ui .modal .modal-content .modal-header .close {
    width: 32px;
    height: 32px;
    margin: -4px -8px -4px auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ak-r-inner);
    color: var(--ak-text-3);
    opacity: 1;
    text-shadow: none;
    transition: background-color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .modal .modal-content .modal-header .close:hover {
    background: var(--ak-surface-3);
    color: var(--ak-text);
}

.ak-new-ui .modal .modal-content .modal-header .close:before {
    font-size: 16px;
}

.ak-new-ui .modal .modal-body {
    padding: 20px 24px;
}

.ak-new-ui .modal .modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--ak-line);
    background: var(--ak-surface-2);
    border-bottom-left-radius: var(--ak-r-4);
    border-bottom-right-radius: var(--ak-r-4);
    gap: 8px;
}

.ak-new-ui .modal .modal-footer > :not(:first-child) {
    margin-left: 0;
}

.ak-new-ui .modal .modal-footer > :not(:last-child) {
    margin-right: 0;
}

.ak-new-ui .modal h5 {
    font-size: 15px;
    font-weight: 600;
}

/* ================================================================== 13 Alerts, toasts, dialogs */
.ak-new-ui .alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    border: 0;
    border-radius: var(--ak-r-2);
}

.ak-new-ui .alert.alert-danger {
    color: var(--ak-danger);
    background: var(--ak-danger-soft);
    box-shadow: inset 0 0 0 1px var(--ak-danger-line);
}

.ak-new-ui .alert.alert-success {
    color: var(--ak-success);
    background: var(--ak-success-soft);
    box-shadow: inset 0 0 0 1px var(--ak-success-line);
}

.ak-new-ui .alert.alert-warning {
    color: var(--ak-warning);
    background: var(--ak-warning-soft);
    box-shadow: inset 0 0 0 1px var(--ak-warning-line);
}

.ak-new-ui .alert.alert-info,
.ak-new-ui .alert.alert-primary {
    color: var(--ak-info);
    background: var(--ak-info-soft);
    box-shadow: inset 0 0 0 1px var(--ak-info-line);
}

/* toastr: ink cards with a coloured edge */
.ak-new-ui #toast-container > div {
    opacity: 1;
    width: 360px;
    padding: 14px 16px 14px 50px;
    color: #f3f4f6;
    background-color: #141821;
    background-position: 17px 15px;
    border: 0;
    border-radius: var(--ak-r-3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .55);
    font-size: 13px;
    line-height: 20px;
}

.ak-new-ui #toast-container > .toast-success { box-shadow: inset 3px 0 0 #17b26a, 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .55); }
.ak-new-ui #toast-container > .toast-error   { box-shadow: inset 3px 0 0 #f04438, 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .55); }
.ak-new-ui #toast-container > .toast-warning { box-shadow: inset 3px 0 0 #f79009, 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .55); }
.ak-new-ui #toast-container > .toast-info    { box-shadow: inset 3px 0 0 #2e90fa, 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .55); }

.ak-new-ui #toast-container > div .toast-title {
    font-weight: 600;
}

.ak-new-ui #toast-container > div .toast-progress {
    background: var(--ak-brand);
    opacity: .7;
}

/* SweetAlert2 */
.ak-new-ui .swal2-popup {
    background: var(--ak-surface);
    border-radius: var(--ak-r-4);
    padding: 28px;
    box-shadow: var(--ak-elev-pop);
}

.ak-new-ui .swal2-popup .swal2-title {
    color: var(--ak-text);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ak-new-ui .swal2-popup .swal2-content,
.ak-new-ui .swal2-popup .swal2-html-container {
    color: var(--ak-text-3);
    font-size: 14px;
}

.ak-new-ui .swal2-popup .swal2-actions {
    gap: 8px;
}

.ak-new-ui .swal2-popup .swal2-actions .btn {
    margin: 0;
}

/* its default buttons carry inline colours, hence !important */
.ak-new-ui .swal2-popup .swal2-styled {
    margin: 0;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--ak-r-2) !important;
}

.ak-new-ui .swal2-popup .swal2-styled.swal2-confirm {
    color: var(--ak-on-brand) !important;
    background: linear-gradient(180deg, var(--ak-brand-hi), var(--ak-brand)) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(196, 90, 10, .55) !important;
}

.ak-new-ui .swal2-popup .swal2-styled.swal2-cancel {
    color: var(--ak-text) !important;
    background: var(--ak-surface) !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px var(--ak-line-2) !important;
}

.ak-new-ui .swal2-popup .swal2-styled:hover {
    filter: brightness(1.04);
}

.ak-new-ui .swal2-popup .swal2-styled:focus {
    box-shadow: var(--ak-ring) !important;
}

/* jquery-confirm (a light island) */
.ak-new-ui .jconfirm .jconfirm-box {
    border-radius: var(--ak-r-4) !important;
    box-shadow: var(--ak-elev-pop) !important;
    padding: 20px 24px 16px !important;
}

.ak-new-ui .jconfirm .jconfirm-box .jconfirm-title-c {
    color: var(--ak-text);
    font-size: 18px !important;
    font-weight: 700;
}

.ak-new-ui .jconfirm .jconfirm-box .jconfirm-content {
    color: var(--ak-text-3);
    font-size: 14px;
}

.ak-new-ui .jconfirm .jconfirm-box .jconfirm-buttons button {
    border-radius: var(--ak-r-2) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* Metronic page loader ("Loading ...") */
.ak-new-ui .kt-dialog.kt-dialog--loader,
.ak-new-ui .blockui {
    color: var(--ak-text-2);
    background: var(--ak-surface);
    border: 0;
    border-radius: var(--ak-r-2);
    box-shadow: var(--ak-elev-pop);
    font-weight: 600;
}

/* ================================================================== 14 Dashboard */
.ak-new-ui .kt-widget17 .kt-widget17__stats {
    margin: 0;
    width: 100%;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items {
    margin: 0;
}

/* KPI card: label, big number, icon chip, period chip and a coloured meter along the foot */
.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    margin: 0 !important;
    padding: 20px 20px 26px 22px !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    cursor: default;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item:hover {
    box-shadow: none;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__icon {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ak-r-2);
    background: var(--ak-kpi-soft, var(--ak-accent-soft));
    box-shadow: inset 0 0 0 1px var(--ak-kpi-line, rgba(243, 127, 30, .25));
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__icon svg {
    width: 20px;
    height: 20px;
    margin: 0 !important;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__icon svg g [fill] {
    fill: var(--ak-kpi, var(--ak-brand));
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item > a {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__subtitle {
    margin: 0;
    color: var(--ak-text-3);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__desc {
    margin: 10px 0 0;
    color: var(--ak-text);
    font-size: 34px;
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item > a:hover .kt-widget17__subtitle {
    color: var(--ak-text);
}

.ak-new-ui #kt_content .kt-portlet:has(.kt-widget17) {
    position: relative;
    height: calc(100% - 24px);
    background:
        radial-gradient(240px 140px at 100% 0%, var(--ak-kpi-soft, var(--ak-accent-soft)), transparent 70%),
        var(--ak-surface);
}

.ak-new-ui #kt_content .kt-portlet:has(.kt-widget17):after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--ak-kpi, var(--ak-brand)), transparent 90%);
    opacity: .8;
}

.ak-new-ui #kt_content .kt-portlet:has(.kt-widget17) > .kt-portlet__head {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 0;
    padding: 0 14px 18px 0;
    border: 0;
    z-index: 2;
}

.ak-new-ui #kt_content .kt-portlet:has(.kt-widget17) > .kt-portlet__body {
    padding: 0 !important;
}

/* one hue per KPI: new (orange), cancelled (red), customers (blue), users (green) */
.ak-new-ui[data-ak-page="dashboard"] #kt_content .row > [class*="col-"]:nth-child(1) { --ak-kpi: #f37f1e; --ak-kpi-soft: rgba(243, 127, 30, .12); --ak-kpi-line: rgba(243, 127, 30, .28); }
.ak-new-ui[data-ak-page="dashboard"] #kt_content .row > [class*="col-"]:nth-child(2) { --ak-kpi: #f04438; --ak-kpi-soft: rgba(240, 68, 56, .10); --ak-kpi-line: rgba(240, 68, 56, .26); }
.ak-new-ui[data-ak-page="dashboard"] #kt_content .row > [class*="col-"]:nth-child(3) { --ak-kpi: #2e90fa; --ak-kpi-soft: rgba(46, 144, 250, .10); --ak-kpi-line: rgba(46, 144, 250, .26); }
.ak-new-ui[data-ak-page="dashboard"] #kt_content .row > [class*="col-"]:nth-child(4) { --ak-kpi: #17b26a; --ak-kpi-soft: rgba(23, 178, 106, .10); --ak-kpi-line: rgba(23, 178, 106, .26); }

@media (max-width: 767px) {
    .ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item {
        padding: 16px 16px 24px !important;
    }

    .ak-new-ui .kt-widget17 .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__icon {
        display: none;
    }

    .ak-new-ui #kt_content .kt-portlet:has(.kt-widget17) > .kt-portlet__head {
        padding: 0 12px 16px 0;
    }
}

/* amCharts text follows the theme */
.ak-new-ui #customers_chart svg text {
    fill: var(--ak-text-3);
}

/* ================================================================== 15 Command palette */
.ak-new-ui .ak-cmdk {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}

.ak-new-ui .ak-cmdk[hidden] {
    display: none;
}

.ak-new-ui .ak-cmdk__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 14, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: ak-fade 160ms var(--ak-ease);
}

.ak-new-ui .ak-cmdk__panel {
    position: relative;
    width: 640px;
    max-width: 100%;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    background: var(--ak-surface);
    border-radius: var(--ak-r-4);
    box-shadow: var(--ak-elev-pop);
    overflow: hidden;
    animation: ak-pop 180ms var(--ak-ease);
}

@keyframes ak-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ak-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.ak-new-ui .ak-cmdk__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ak-line);
}

.ak-new-ui .ak-cmdk__search svg {
    flex: 0 0 18px;
    color: var(--ak-text-3);
}

.ak-new-ui .ak-cmdk__input {
    flex: 1 1 auto;
    height: 56px;
    padding: 0;
    font-size: 16px;
    color: var(--ak-text);
    background: transparent;
    border: 0;
    outline: 0;
}

.ak-new-ui .ak-cmdk__input::placeholder {
    color: var(--ak-placeholder);
}

.ak-new-ui .ak-cmdk__list {
    flex: 1 1 auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ak-new-ui .ak-cmdk__group {
    padding: 10px 10px 4px;
    color: var(--ak-text-3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ak-new-ui .ak-cmdk__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 10px;
    color: var(--ak-text-2);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--ak-r-2);
    cursor: pointer;
}

.ak-new-ui .ak-cmdk__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: var(--ak-text-3);
    background: var(--ak-surface-2);
    border-radius: var(--ak-r-inner);
    box-shadow: inset 0 0 0 1px var(--ak-line);
    font-size: 15px;
}

.ak-new-ui .ak-cmdk__icon svg {
    width: 16px;
    height: 16px;
}

.ak-new-ui .ak-cmdk__icon svg g [fill] {
    fill: currentColor;
}

.ak-new-ui .ak-cmdk__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ak-new-ui .ak-cmdk__label mark {
    padding: 0;
    color: inherit;
    background: transparent;
    box-shadow: inset 0 -2px 0 rgba(243, 127, 30, .55);
}

.ak-new-ui .ak-cmdk__meta {
    color: var(--ak-text-3);
    font-size: 12px;
}

.ak-new-ui .ak-cmdk__item[aria-selected="true"] {
    color: var(--ak-text);
    background: var(--ak-accent-soft);
}

.ak-new-ui .ak-cmdk__item[aria-selected="true"] .ak-cmdk__icon {
    color: var(--ak-brand);
    background: var(--ak-surface);
    box-shadow: inset 0 0 0 1px rgba(243, 127, 30, .35);
}

.ak-new-ui .ak-cmdk__empty {
    padding: 36px 16px;
    color: var(--ak-text-3);
    text-align: center;
    font-size: 14px;
}

.ak-new-ui .ak-cmdk__foot {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    color: var(--ak-text-3);
    font-size: 12px;
    border-top: 1px solid var(--ak-line);
    background: var(--ak-surface-2);
}

.ak-new-ui .ak-cmdk__foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ================================================================== 16 Login */
body.ak-login-page {
    background: var(--ak-bg);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside {
    position: relative;
    overflow: hidden;
    background-color: #0b0d12;
    background-image: none !important;
    padding: 44px 52px;
    isolation: isolate;
}

/* slow-moving brand light */
.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside:before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -2;
    background:
        radial-gradient(38% 34% at 22% 26%, rgba(243, 127, 30, .55), transparent 70%),
        radial-gradient(32% 30% at 78% 70%, rgba(255, 155, 69, .32), transparent 70%),
        radial-gradient(40% 40% at 60% 20%, rgba(124, 58, 237, .16), transparent 70%),
        radial-gradient(45% 45% at 30% 85%, rgba(46, 144, 250, .14), transparent 70%);
    filter: blur(28px) saturate(120%);
    animation: ak-aurora 22s ease-in-out infinite alternate;
}

@keyframes ak-aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.06); }
    100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.02); }
}

/* fine grid over it */
.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(120% 90% at 30% 30%, #000 30%, transparent 85%);
    mask-image: radial-gradient(120% 90% at 30% 30%, #000 30%, transparent 85%);
    pointer-events: none;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside .kt-login__logo img {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 32px -8px rgba(243, 127, 30, .6);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside .kt-login__title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside .ak-login-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 178, 122, .35);
    background: rgba(243, 127, 30, .14);
    color: #ffc497;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside .ak-login-tagline:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ak-brand);
    box-shadow: var(--ak-glow);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside .ak-login-lede {
    max-width: 440px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .84);
    font-size: 19px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.ak-new-ui .ak-login-points {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ak-new-ui .ak-login-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .8);
    font-size: 14.5px;
}

.ak-new-ui .ak-login-points li:before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(243, 127, 30, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb27a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17 19 7.5'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
    box-shadow: inset 0 0 0 1px rgba(255, 178, 122, .3);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__aside .kt-login__info .kt-login__copyright {
    color: rgba(255, 255, 255, .56);
    font-size: 12px;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper {
    background: var(--ak-bg);
    background-image: radial-gradient(700px 360px at 85% 0%, var(--ak-bg-glow), transparent 70%);
    padding: 40px 24px;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form {
    max-width: 424px;
    padding: 36px 36px 30px;
    background: var(--ak-surface);
    border-radius: var(--ak-r-4);
    box-shadow: var(--ak-elev-2);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__title {
    text-align: left;
    margin: 0 0 26px;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__title > h3 {
    margin: 0 0 8px;
    color: var(--ak-text);
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ak-new-ui .ak-login-subtitle {
    margin: 0;
    color: var(--ak-text-3);
    font-size: 14px;
    line-height: 21px;
}

.ak-new-ui .ak-login-mobile-brand {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: var(--ak-text);
    font-size: 15px;
    font-weight: 700;
}

.ak-new-ui .ak-login-mobile-brand img {
    width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--ak-line-2);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form {
    margin: 0;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group {
    margin: 0 0 16px;
}

.ak-new-ui .ak-login-label {
    display: block;
    margin: 0 0 6px;
    color: var(--ak-text-2);
    font-size: 13px;
    font-weight: 600;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group .form-control {
    height: 46px;
    margin-top: 0;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ak-text);
    background-color: var(--ak-input);
    border: 1px solid var(--ak-line-2);
    border-radius: var(--ak-r-2);
    box-shadow: var(--ak-shadow-xs);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group .form-control:focus {
    background-color: var(--ak-input);
    border-color: var(--ak-brand);
    box-shadow: var(--ak-ring);
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group #otp {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group #otp::placeholder {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
}

.ak-new-ui .ak-password-wrap {
    position: relative;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group .ak-password-wrap .form-control {
    padding-right: 48px;
}

.ak-new-ui .ak-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 36px;
    height: 34px;
    margin-top: -17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--ak-r-inner);
    background: transparent;
    color: var(--ak-text-3);
    cursor: pointer;
    transition: background-color var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}

.ak-new-ui .ak-pw-toggle:hover {
    background: var(--ak-surface-3);
    color: var(--ak-text);
}

.ak-new-ui .ak-pw-toggle i {
    font-size: 15px;
}

.ak-new-ui .ak-login-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 16px;
    color: var(--ak-text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ak-new-ui .ak-login-step:before,
.ak-new-ui .ak-login-step:after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ak-line-2);
}

/* OTP mode: "Generate OTP" button */
.ak-new-ui .kt-login.kt-login--v1 .kt-login__form .kt-form .form-group[style*="text-align"] {
    margin: 0 0 12px !important;
    text-align: left !important;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__form #generate_otp {
    width: 100%;
    height: 42px;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions {
    flex-direction: column;
    align-items: stretch;
    margin: 8px 0 0;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__form .kt-login__actions .kt-login__extra {
    margin: 0 0 20px;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__form .kt-login__actions .kt-login__extra > .col {
    padding: 0;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__form .kt-login__actions .kt-checkbox {
    margin: 0;
}

.ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions .kt-login__btn-primary {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 700;
}

.ak-new-ui .kt-login .alert {
    margin-bottom: 16px;
}

.ak-new-ui .kt-login .alert > span,
.ak-new-ui .kt-login #message_div .alert span {
    display: block;
}

.ak-new-ui .kt-login .alert:before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ak-new-ui .kt-login .alert.alert-success:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16.5 9.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16.5 9.5'/%3E%3C/svg%3E");
}

@media (min-width: 1025px) {
    .ak-new-ui .kt-login.kt-login--v1 .kt-login__aside {
        flex: 0 0 46%;
        max-width: 680px;
    }
}

@media (max-width: 1024px) {
    .ak-new-ui .kt-login.kt-login--v1 .kt-login__aside {
        display: none !important;
    }

    .ak-new-ui .ak-login-mobile-brand {
        display: flex;
    }

    .ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper {
        min-height: 100vh;
        padding: 32px 16px;
    }

    .ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body {
        margin-top: 0;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ak-new-ui .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form {
        padding: 26px 20px 22px;
        border-radius: var(--ak-r-3);
    }
}

/* ================================================================== 17 Invoice preview fence */
/* #upcoming_invoice_container is what html2canvas turns into the downloadable PDF, so it keeps the
   original theme: its cards (.preview-portlet), item table (#item_table) and status label are excluded
   above, its text goes back to the theme font, and it is a light island in dark mode. */
.ak-new-ui #upcoming_invoice_container {
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: #646c9a;
    font-feature-settings: normal;
}

/* ================================================================== 18 Dark-mode fixes for page content */
/* inline colours and page classes that hard-code dark text outside the light islands */
html[data-ak-theme="dark"] .ak-new-ui #kt_content [style*="color: #212529"],
html[data-ak-theme="dark"] .ak-new-ui #kt_content [style*="color: #000"],
html[data-ak-theme="dark"] .ak-new-ui #kt_content [style*="color: #48465b"],
html[data-ak-theme="dark"] .ak-new-ui #kt_content [style*="color: #212121"],
html[data-ak-theme="dark"] .ak-new-ui #kt_content .text-dark,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .label_bold,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .reverse-title,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .owner-label,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .confirm-message,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .delete-confirm-text,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .monthly_total,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .kt-widget4__item {
    color: var(--ak-text) !important;
}

html[data-ak-theme="dark"] .ak-new-ui #kt_content .owner-name,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .owner-email {
    color: var(--ak-text-3) !important;
}

html[data-ak-theme="dark"] .ak-new-ui #kt_content [style*="color: #fd397a"] {
    color: var(--ak-danger) !important;
}

html[data-ak-theme="dark"] .ak-new-ui .progress {
    background: var(--ak-surface-3);
}

.ak-new-ui .lead_divider {
    border-top-color: var(--ak-line) !important;
}

html[data-ak-theme="dark"] .ak-new-ui #kt_content .bg-white,
html[data-ak-theme="dark"] .ak-new-ui #kt_content .bg-light {
    background-color: var(--ak-surface-2) !important;
}

/* ================================================================== 19 Focus, motion, small screens */
html.ak-new-ui a:focus-visible,
html.ak-new-ui button:focus-visible,
html.ak-new-ui .btn:focus-visible,
html.ak-new-ui [tabindex]:focus-visible,
html.ak-new-ui .page-link:focus-visible,
html.ak-new-ui .dropdown-item:focus-visible {
    outline: 2px solid var(--ak-brand) !important;
    outline-offset: 2px;
}

html.ak-new-ui .kt-aside-menu .kt-menu__link:focus-visible {
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .ak-new-ui *,
    .ak-new-ui *:before,
    .ak-new-ui *:after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 1024px) {
    .ak-new-ui {
        --ak-card-pad: 16px;
    }

    .ak-new-ui .kt-content .kt-container,
    .ak-new-ui .kt-footer .kt-container {
        padding: 0 16px;
    }

    .ak-new-ui .kt-subheader,
    body.ak-new-ui.kt-subheader--enabled.kt-subheader--solid .kt-subheader {
        padding: 22px 0 18px;
    }

    .ak-new-ui .kt-subheader .kt-subheader__main .kt-subheader__title {
        font-size: 23px;
        line-height: 30px;
    }

    .ak-new-ui .kt-subheader .kt-subheader__toolbar {
        margin-left: 0;
    }

    .ak-new-ui div.dataTables_wrapper div.dataTables_filter {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .ak-new-ui div.dataTables_wrapper div.dataTables_length {
        text-align: left;
    }

    .ak-new-ui div.dataTables_wrapper div.dataTables_filter {
        justify-content: flex-start !important;
        text-align: left;
    }

    /* each search box takes its own full-width line; a short label + select pair (Status) stays on one line */
    .ak-new-ui div.dataTables_wrapper div.dataTables_filter > label:not(.form-control-label) {
        flex: 1 1 100%;
    }

    .ak-new-ui div.dataTables_wrapper div.dataTables_filter > label:not(.form-control-label) input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .ak-new-ui .ak-grid .ak-grid-foot > [class*="col-"] {
        justify-content: center;
    }

    .ak-new-ui div.dataTables_wrapper div.dataTables_info {
        text-align: center;
        white-space: normal;
    }

    .ak-new-ui .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .ak-new-ui .kt-portlet .kt-portlet__head .kt-portlet__head-toolbar {
        width: 100%;
    }

    .ak-new-ui .ak-page-actions {
        width: 100%;
    }

    .ak-new-ui .modal .modal-content .modal-header,
    .ak-new-ui .modal .modal-body,
    .ak-new-ui .modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ak-new-ui .ak-cmdk {
        padding-top: 8vh;
    }

    .ak-new-ui .ak-cmdk__foot {
        display: none;
    }
}