/* WSS ERP — Brand colors & layout helpers */
:root,
[data-bs-theme=light],
[data-theme="default"],
[data-theme="material"],
[data-theme="creative"],
[data-theme="minimal"],
[data-theme="modern"],
[data-theme="interaction"] {
    --tb-vertical-menu-width: 300px;
    --wss-primary: #843c0b;
    --wss-secondary: #203864;
    --tb-primary: #843c0b;
    --tb-primary-rgb: 132, 60, 11;
    --tb-primary-bg-subtle: rgba(132, 60, 11, 0.15);
    --tb-primary-border-subtle: rgba(132, 60, 11, 0.3);
    --tb-primary-text-emphasis: #6a3009;
    --tb-secondary: #203864;
    --tb-secondary-rgb: 32, 56, 100;
    --tb-secondary-bg-subtle: rgba(32, 56, 100, 0.15);
    --tb-secondary-border-subtle: rgba(32, 56, 100, 0.3);
    --tb-secondary-text-emphasis: #1a2d50;
    --tb-link-color: #843c0b;
    --tb-link-hover-color: #6a3009;
    --tb-link-color-rgb: 132, 60, 11;
    --tb-link-hover-color-rgb: 106, 48, 9;
}

/* Default content links — WSS brand brown */
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link):not(.wss-action-btn):not([class*="btn-"]) {
    color: rgba(var(--tb-link-color-rgb), var(--tb-link-opacity, 1));
}
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link):not(.wss-action-btn):not([class*="btn-"]):hover,
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link):not(.wss-action-btn):not([class*="btn-"]):focus {
    color: rgba(var(--tb-link-hover-color-rgb), var(--tb-link-opacity, 1));
}
[data-theme="default"][data-sidebar="light"] {
    --tb-vertical-menu-item-active-bg: rgba(132, 60, 11, 0.15);
}
[data-theme="default"][data-topbar="light"] {
    --tb-topnav-item-color-active: #843c0b;
    --tb-topnav-sub-item-color-active: #843c0b;
}

/* WSS light sidebar panel */
[data-layout=vertical][data-sidebar="dark"],
[data-theme="default"][data-sidebar="dark"] {
    --tb-vertical-menu-bg: #f8fafc;
    --tb-vertical-menu-border: #e8ecf2;
    --tb-vertical-menu-item-color: #5c6370;
    --tb-vertical-menu-item-hover-color: #843c0b;
    --tb-vertical-menu-item-hover-bg: rgba(132, 60, 11, 0.08);
    --tb-vertical-menu-item-active-color: #843c0b;
    --tb-vertical-menu-item-active-bg: rgba(132, 60, 11, 0.12);
    --tb-vertical-menu-sub-item-color: #6d7585;
    --tb-vertical-menu-sub-item-hover-color: #843c0b;
    --tb-vertical-menu-sub-item-active-color: #843c0b;
    --tb-vertical-menu-title-color: #98a2b3;
}
[data-layout=vertical] .app-menu.navbar-menu {
    background: var(--tb-vertical-menu-bg) !important;
    border-right-color: var(--tb-vertical-menu-border) !important;
}
[data-layout=vertical][data-sidebar="dark"] .app-menu.navbar-menu .logo.logo-dark {
    display: inline-block !important;
}
[data-layout=vertical][data-sidebar="dark"] .app-menu.navbar-menu .logo.logo-light {
    display: none !important;
}
[data-layout=vertical] .app-menu.navbar-menu .navbar-brand-box {
    flex: 0 0 auto;
    padding: 0.85rem 1.25rem 0.65rem;
    min-height: unset;
    border-bottom: none !important;
    box-shadow: none !important;
}
[data-layout=vertical] .app-menu.navbar-menu .navbar-brand-box::before,
[data-layout=vertical] .app-menu.navbar-menu .navbar-brand-box::after {
    content: none !important;
    display: none !important;
}
[data-layout=vertical] .app-menu.navbar-menu #scrollbar,
[data-layout=vertical] .app-menu.navbar-menu #scrollbar .container-fluid {
    border-top: none !important;
}
[data-layout=vertical] .app-menu.navbar-menu .navbar-brand-box .logo {
    line-height: 1;
    display: inline-block;
}
[data-layout=vertical] .app-menu.navbar-menu .navbar-brand-box .logo img {
    height: 45px !important;
    max-height: 45px;
    width: auto;
    display: block;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav > .nav-item > .nav-link,
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav .menu-link {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav .menu-dropdown .nav-sm .nav-link {
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
}
[data-layout=vertical] .app-menu.navbar-menu .menu-title {
    padding-top: 0.45rem;
    padding-bottom: 0.2rem;
    margin-bottom: 0;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav .nav-item {
    margin-bottom: 0;
}

/* Sidebar vertical scroll */
[data-layout=vertical] .app-menu.navbar-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    max-height: 100vh;
    padding-bottom: 0 !important;
}
[data-layout=vertical] .app-menu.navbar-menu #scrollbar {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
[data-layout=vertical] .app-menu.navbar-menu #scrollbar.wss-sidebar-scroll-native {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
[data-layout=vertical] .app-menu.navbar-menu #scrollbar .container-fluid {
    padding-bottom: 1.5rem;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0.5rem;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav .nav-item {
    position: relative;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"] {
    position: relative;
    padding-right: 1.25rem;
}
[data-layout=vertical] .app-menu.navbar-menu #navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]::after {
    position: relative;
    right: auto;
    margin-left: auto;
    flex-shrink: 0;
}

/* Compact sidebar: stay fixed in viewport (do not scroll with page content) */
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #scrollbar,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #scrollbar,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #scrollbar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Compact sidebar: logo container hugs image (Law of Proximity / Prägnanz) */
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu {
    padding-top: var(--tb-header-height, 70px) !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .navbar-brand-box,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .navbar-brand-box {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--tb-vertical-menu-width-sm, 70px) !important;
    min-width: var(--tb-vertical-menu-width-sm, 70px) !important;
    max-width: var(--tb-vertical-menu-width-sm, 70px) !important;
    height: var(--tb-header-height, 70px) !important;
    padding: 0 !important;
    margin: 0;
    z-index: 1002;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    text-align: center;
    background: var(--tb-vertical-menu-bg, #f8fafc);
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box .logo.logo-light,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .navbar-brand-box .logo.logo-light,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .navbar-brand-box .logo.logo-light {
    display: none !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box .logo.logo-dark,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .navbar-brand-box .logo.logo-dark,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .navbar-brand-box .logo.logo-dark {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .logo span.logo-sm,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .logo span.logo-sm,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .logo span.logo-sm {
    display: none !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .logo span.logo-lg,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .logo span.logo-lg,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .logo span.logo-lg {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box .logo img,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .navbar-brand-box .logo img,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .navbar-brand-box .logo img {
    display: block;
    height: auto !important;
    max-height: 28px !important;
    max-width: calc(var(--tb-vertical-menu-width-sm, 70px) - 10px) !important;
    width: auto !important;
    margin: 0 auto;
    object-fit: contain;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .btn-vertical-sm-hover,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .btn-vertical-sm-hover,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .btn-vertical-sm-hover {
    display: none !important;
}

/* Compact sidebar: highlight only on hover (not when cursor leaves) */
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link {
    background: transparent !important;
    color: var(--tb-vertical-menu-item-color, #5c6370) !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link > i,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link > i,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link > i {
    color: var(--tb-vertical-menu-item-color, #5c6370) !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link.active,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link.active,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link.active {
    background: transparent !important;
    color: var(--tb-vertical-menu-item-active-color, #843c0b) !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link.active > i,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link.active > i,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item > .menu-link.active > i {
    color: var(--tb-vertical-menu-item-active-color, #843c0b) !important;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link {
    color: var(--tb-vertical-menu-item-hover-color, #843c0b) !important;
    background: var(--tb-vertical-menu-item-hover-bg, rgba(132, 60, 11, 0.08)) !important;
    border-radius: 0.375rem 0 0 0.375rem;
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link > i,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link > i,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link > i {
    color: var(--tb-vertical-menu-item-hover-color, #843c0b) !important;
}

/* Compact sidebar: only show JS-positioned flyout panels */
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.wss-compact-flyout-panel),
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.wss-compact-flyout-panel),
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.wss-compact-flyout-panel) {
    display: none !important;
}

/* Flyout header hidden in expanded sidebar */
.app-menu.navbar-menu #navbar-nav .wss-compact-flyout-header {
    display: none;
}

/* Compact flyout: connected panel (Law of Common Region / Uniform Connectedness) */
.app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    position: fixed;
    width: 220px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--tb-vertical-menu-bg, #f8fafc);
    border: 1px solid var(--tb-vertical-menu-border, #e8ecf2);
    border-left: 3px solid var(--tb-vertical-menu-item-active-color, #843c0b);
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    z-index: 1100;
}
.app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel .wss-compact-flyout-header {
    display: block;
    padding: 0.625rem 1rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tb-vertical-menu-item-active-color, #843c0b);
    background: rgba(132, 60, 11, 0.06);
    border-bottom: 1px solid var(--tb-vertical-menu-border, #e8ecf2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel .nav-sm {
    padding: 0.35rem 0;
}
.app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel .nav-sm .nav-link {
    padding: 0.45rem 1rem;
    font-size: 0.8125rem;
    color: var(--tb-vertical-menu-sub-item-color, #6d7585);
    border-radius: 0;
}
.app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel .nav-sm .nav-link:hover,
.app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel .nav-sm .nav-link.active {
    color: var(--tb-vertical-menu-item-hover-color, #843c0b) !important;
    background: rgba(132, 60, 11, 0.06);
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link,
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item.wss-compact-flyout-open > .menu-link {
    width: auto !important;
    max-width: calc(var(--tb-vertical-menu-width-sm, 70px) - 1rem);
}
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item:hover > .menu-link span,
[data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .nav-item.wss-compact-flyout-open > .menu-link span,
[data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .nav-item.wss-compact-flyout-open > .menu-link span,
[data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .nav-item.wss-compact-flyout-open > .menu-link span {
    display: none !important;
}

.row.wss-equal-height > [class*="col-"] { display: flex; flex-direction: column; }
.row.wss-equal-height .card { flex: 1 1 auto; }
.wss-kpi-card {
    border: 0;
    box-shadow: 0 1px 2px rgba(56, 65, 74, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wss-kpi-card .card-body {
    padding: 1.25rem;
    min-height: 148px;
}
.wss-kpi-card .avatar-sm .avatar-title {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wss-kpi-card .wss-kpi-value {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}
.wss-kpi-foot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wss-kpi-drill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(56, 65, 74, 0.12);
}
.wss-stat-card { transition: transform 0.15s ease; }
.wss-stat-card:hover { transform: translateY(-2px); }
.wss-deadline-card .badge { font-size: 0.7rem; }

/* Header — Recent Items dropdown content */
.wss-recent-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(132, 60, 11, 0.1);
    color: var(--tb-primary);
    flex-shrink: 0;
}
.wss-recent-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 0.5rem;
}
.wss-recent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.wss-recent-item:hover {
    background: rgba(132, 60, 11, 0.06);
    color: inherit;
}
.wss-recent-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: var(--tb-light);
    color: #64748b;
    flex-shrink: 0;
}
.wss-recent-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.wss-recent-item-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wss-recent-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
}
.wss-recent-item-meta .badge {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.2em 0.45em;
}
.wss-recent-item-arrow {
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 0.875rem;
}
.wss-recent-empty {
    padding: 2rem 1.25rem;
    text-align: center;
}

/* Login — Google Authenticator step */
.wss-auth-2fa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(132, 60, 11, 0.1);
    color: var(--tb-primary);
    font-size: 1.75rem;
}
.wss-auth-otp-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.wss-auth-otp-row .wss-otp-input {
    width: 2.75rem;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
@media (max-width: 400px) {
    .wss-auth-otp-row {
        gap: 0.35rem;
    }
    .wss-auth-otp-row .wss-otp-input {
        width: 2.35rem;
        font-size: 1.1rem;
    }
}

/* Email Inbox — 3-column Outlook layout */
.page-content .email-wrapper.wss-email-inbox-3col {
    min-height: calc(100vh - var(--tb-header-height) - 1rem);
    align-items: stretch;
}
@media (min-width: 992px) {
    .page-content .wss-email-inbox-3col .email-menu-sidebar {
        flex: 0 0 220px;
        width: 220px;
        min-width: 220px;
        max-width: 220px;
        height: calc(100vh - var(--tb-header-height) - 1.5rem);
    }
    .page-content .wss-email-inbox-3col .email-content {
        flex: 0 0 32%;
        width: 32%;
        max-width: 420px;
        min-width: 280px;
        height: calc(100vh - var(--tb-header-height) - 1.5rem);
        border: var(--tb-card-border-width-custom) solid var(--tb-border-color-translucent);
        background: var(--tb-secondary-bg);
    }
    .page-content .wss-email-inbox-3col .email-detail-content {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        display: flex !important;
        transform: none !important;
        position: relative;
        left: 0;
        height: calc(100vh - var(--tb-header-height) - 1.5rem);
        border: var(--tb-card-border-width-custom) solid var(--tb-border-color-translucent);
        border-left: 0;
        background: var(--tb-secondary-bg);
    }
    .page-content .wss-email-inbox-3col.email-detail-show .email-content,
    .page-content .wss-email-inbox-3col .email-content {
        margin-right: 0;
    }
}
.page-content .wss-email-inbox-3col .message-list li.active {
    background: rgba(132, 60, 11, 0.08);
    border-left: 3px solid var(--tb-primary);
}
.page-content .wss-email-inbox-3col .wss-email-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 280px;
    color: var(--tb-secondary-color);
    padding: 2rem;
}
.page-content .wss-email-inbox-3col .wss-email-detail-empty.d-none,
.page-content .wss-email-inbox-3col .wss-email-detail-body.d-none {
    display: none !important;
}
.page-content .wss-email-inbox-3col .email-detail-content-scroll,
.page-content .wss-email-inbox-3col .message-list-content {
    height: calc(100vh - var(--tb-header-height) - 220px);
}
#composeModal .ck-editor-reverse .ck-editor__editable {
    min-height: 200px;
}
#composeModal .ck.ck-editor__main > .ck-editor__editable {
    border-radius: 0 0 0.375rem 0.375rem;
}
#composeAttachList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.35rem;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.375rem;
    background: var(--tb-light);
    font-size: 0.8125rem;
}
@media (max-width: 991.98px) {
    .page-content .wss-email-inbox-3col .email-detail-content {
        display: none !important;
    }
    .page-content .wss-email-inbox-3col.email-detail-show .email-detail-content {
        display: flex !important;
        position: fixed;
        inset: 0;
        z-index: 1050;
        width: 100% !important;
        height: 100%;
        transform: none !important;
    }
    .page-content .wss-email-inbox-3col .email-detail-content-scroll,
    .page-content .wss-email-inbox-3col .message-list-content {
        height: calc(100vh - 260px);
    }
}

/* Sidebar: keep every menu & submenu label on a single line */
.app-menu.navbar-menu #navbar-nav .nav-link,
.app-menu.navbar-menu #navbar-nav .menu-link,
.app-menu.navbar-menu #navbar-nav .menu-link span,
.app-menu.navbar-menu #navbar-nav .menu-dropdown .nav-link {
    white-space: nowrap;
}
.app-menu.navbar-menu #navbar-nav .menu-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.app-menu.navbar-menu #navbar-nav .menu-link > i,
.app-menu.navbar-menu #navbar-nav .menu-link > svg {
    flex-shrink: 0;
}
.app-menu.navbar-menu #navbar-nav .menu-link > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-menu.navbar-menu #navbar-nav .menu-dropdown .nav-link {
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-menu.navbar-menu .menu-title span {
    white-space: nowrap;
}

/* Quote comparison highlights */
.wss-best-price { background-color: rgba(10, 179, 156, 0.12) !important; font-weight: 600; color: var(--tb-success); }
.wss-best-delivery { background-color: rgba(132, 60, 11, 0.1) !important; font-weight: 600; color: var(--tb-primary); }
.wss-best-technical { background-color: rgba(135, 93, 232, 0.12) !important; font-weight: 600; color: #875de8; }
.wss-highest-risk { background-color: rgba(240, 101, 72, 0.12) !important; color: var(--tb-danger); }
.wss-param-col { min-width: 180px; }
#comparisonMatrix th, #comparisonMatrix td { vertical-align: middle; }
.wss-email-preview { background: var(--tb-light); border: 1px dashed var(--tb-border-color); border-radius: 0.375rem; padding: 1.25rem; }

/* T&C Mismatch Engine */
.wss-tc-green { background-color: rgba(10, 179, 156, 0.08) !important; }
.wss-tc-green .ph-check-circle { color: var(--tb-success); }
.wss-tc-amber { background-color: rgba(247, 184, 75, 0.12) !important; }
.wss-tc-amber .ph-warning-circle { color: var(--tb-warning); }
.wss-tc-red { background-color: rgba(240, 101, 72, 0.1) !important; }
.wss-tc-red .ph-x-circle { color: var(--tb-danger); }
.wss-tc-compare-row .card { display: flex; flex-direction: column; height: 100%; }
.wss-tc-panel { flex: 1 1 auto; overflow: visible; }
.wss-tc-summary-card { min-height: 100px; }

/* GRN Photo Evidence & QR Labels */
.wss-photo-dropzone { border: 2px dashed var(--tb-border-color); border-radius: 0.5rem; padding: 1.5rem; text-align: center; background: var(--tb-light); transition: border-color 0.2s, background 0.2s; cursor: pointer; }
.wss-photo-dropzone.wss-drop-active { border-color: var(--tb-primary); background: rgba(132, 60, 11, 0.06); }
.wss-photo-card { border: 1px solid var(--tb-border-color); border-radius: 0.5rem; padding: 1rem; height: 100%; }
.wss-photo-thumb .card-img-top { border-radius: 0.375rem 0.375rem 0 0; }
.wss-qr-label { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
@media print { .app-menu, #page-topbar, .breadcrumb, .btn, footer { display: none !important; } .main-content { margin: 0 !important; } }

/* Import Compliance alerts */
.wss-import-alert { border-left: 4px solid; transition: transform 0.15s ease; }
.wss-import-alert:hover { transform: translateY(-2px); }
.wss-import-alert.alert-danger { border-left-color: var(--tb-danger); }
.wss-import-alert.alert-warning { border-left-color: var(--tb-warning); }
.wss-import-alert.alert-info { border-left-color: var(--tb-info); }
.wss-import-alert.alert-success { border-left-color: var(--tb-success); }
.wss-import-alert.alert-dark { border-left-color: var(--tb-dark); }
.wss-import-alert.alert-secondary { border-left-color: var(--tb-secondary); }

/* Finance & Accounts */
.wss-finance-alert { border-left: 4px solid; transition: transform 0.15s ease; }
.wss-finance-alert:hover { transform: translateY(-2px); }
.wss-finance-alert.alert-warning { border-left-color: var(--tb-warning); }
.wss-finance-alert.alert-danger { border-left-color: var(--tb-danger); }
.wss-finance-alert.alert-info { border-left-color: var(--tb-info); }
.wss-finance-alert.alert-primary { border-left-color: var(--tb-primary); }
.wss-finance-alert.alert-secondary { border-left-color: var(--tb-secondary); }
.wss-jv-balanced { border-left: 4px solid var(--tb-success); }
.wss-jv-unbalanced { border-left: 4px solid var(--tb-danger); }
.wss-voucher-entry { padding: 0.75rem 1rem; background: var(--tb-light); border-radius: 0.375rem; border-left: 3px solid var(--tb-primary); }
.wss-tb-summary .card-body { min-height: 100px; }

/* AP/AR — 3-Way Matching & Aging */
.wss-match-green { background-color: rgba(10, 179, 156, 0.08) !important; }
.wss-match-orange { background-color: rgba(247, 184, 75, 0.12) !important; }
.wss-match-red { background-color: rgba(240, 101, 72, 0.1) !important; }
.wss-match-col { min-height: 280px; }
.wss-variance-panel .card-body { min-height: 180px; }
.wss-arap-alert { border-left: 4px solid; transition: transform 0.15s ease; }
.wss-arap-alert:hover { transform: translateY(-2px); }

/* Banking & Treasury */
.wss-bank-alert { border-left: 4px solid; transition: transform 0.15s ease; }
.wss-bank-alert:hover { transform: translateY(-2px); }
.wss-bank-match-green { background-color: rgba(10, 179, 156, 0.08) !important; }
.wss-bank-match-blue { background-color: rgba(32, 56, 100, 0.08) !important; }
.wss-bank-match-orange { background-color: rgba(247, 184, 75, 0.12) !important; }
.wss-bank-match-red { background-color: rgba(240, 101, 72, 0.1) !important; }
.wss-bank-match-panel {
    max-height: 520px;
    overflow: auto;
}
.wss-match-center-card { overflow: hidden; }
.wss-match-table {
    --wss-match-border: rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}
.wss-match-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    padding: 0.7rem 0.85rem;
    white-space: nowrap;
}
.wss-match-table tbody td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--wss-match-border);
    font-size: 0.8125rem;
    vertical-align: middle;
    white-space: nowrap;
}
.wss-match-table tbody td > * {
    white-space: nowrap;
}
.wss-match-table tbody tr:last-child td { border-bottom: none; }
.wss-match-table tbody tr:hover { background: rgba(132, 60, 11, 0.03); }
.wss-match-check {
    width: 2.5rem;
    text-align: center;
    padding-left: 0.85rem !important;
    padding-right: 0.35rem !important;
}
.wss-match-desc {
    display: inline-block;
    max-width: none;
    color: #475569;
}
.wss-match-row { border-left: 3px solid transparent; }
.wss-match-row-success { border-left-color: #0ab39c; background: rgba(10, 179, 156, 0.04); }
.wss-match-row-suggested { border-left-color: #203864; background: rgba(32, 56, 100, 0.04); }
.wss-match-row-partial { border-left-color: #f6b749; background: rgba(247, 184, 75, 0.06); }
.wss-match-row-unmatched { border-left-color: #f06548; background: rgba(240, 101, 72, 0.05); }
.wss-match-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 2rem;
    white-space: nowrap;
    line-height: 1.2;
}
.wss-match-row-success .wss-match-status-pill { background: rgba(10, 179, 156, 0.12); color: #0ab39c; }
.wss-match-row-suggested .wss-match-status-pill { background: rgba(32, 56, 100, 0.12); color: #203864; }
.wss-match-row-partial .wss-match-status-pill { background: rgba(247, 184, 75, 0.18); color: #b45309; }
.wss-match-row-unmatched .wss-match-status-pill { background: rgba(240, 101, 72, 0.12); color: #f06548; }
.wss-match-legend { gap: 0.5rem !important; }
.wss-match-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}
.wss-match-legend-item.wss-match-row-success { color: #0ab39c; }
.wss-match-legend-item.wss-match-row-suggested { color: #203864; }
.wss-match-legend-item.wss-match-row-partial { color: #b45309; }
.wss-match-legend-item.wss-match-row-unmatched { color: #f06548; }
.wss-match-filters .btn.active {
    background: rgba(132, 60, 11, 0.12);
    border-color: rgba(132, 60, 11, 0.25);
    color: var(--wss-primary);
}
.wss-match-search {
    max-width: 100%;
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.08);
}
.wss-match-expand-btn {
    flex-shrink: 0;
}
.wss-match-expand-modal .modal-content {
    background: #fff;
}
.wss-match-expand-modal .modal-body {
    min-height: calc(100vh - 8rem);
}
.wss-match-expand-panel {
    max-height: none;
    height: 100%;
    min-height: calc(100vh - 14rem);
    overflow: auto;
}
.wss-match-expand-panel .wss-match-table {
    width: max-content;
    min-width: 100%;
}
@media (max-width: 767.98px) {
    .wss-bank-match-panel { max-height: 420px; }
}
.wss-stmt-dropzone { border: 2px dashed var(--tb-border-color); border-radius: 0.5rem; padding: 2rem; text-align: center; background: var(--tb-light); cursor: pointer; transition: border-color 0.2s; }
.wss-stmt-dropzone:hover { border-color: var(--tb-primary); }

/* Financial Reporting & MIS */
.wss-report-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wss-report-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.wss-drill-row:hover { background-color: rgba(132, 60, 11, 0.06) !important; }
.wss-bs-section { min-height: 320px; }
.wss-auditor-panel { border-left: 4px solid var(--tb-primary); }

/* Project Costing */
.wss-proj-wip-formula { background: var(--tb-light); border-left: 4px solid var(--tb-info); border-radius: 0.375rem; }
.wss-proj-tab-pane { min-height: 280px; }
.wss-proj-cash-widget { border-top: 3px solid var(--tb-success); }
.wss-pnl-table tr.wss-pnl-header td { font-weight: 600; background: var(--tb-light); }
.wss-pnl-table tr.wss-pnl-deduct td:first-child { padding-left: 1.75rem; color: var(--tb-secondary-color); }
.wss-pnl-table tr.wss-pnl-subtotal td { font-weight: 600; background: rgba(132, 60, 11, 0.06); }
.wss-pnl-table tr.wss-pnl-total td { font-weight: 700; background: rgba(32, 56, 100, 0.08); }
.wss-cf-table tr.wss-cf-section td { font-weight: 700; background: rgba(32, 56, 100, 0.08); font-size: 0.875rem; }
.wss-cf-table tr.wss-cf-subheader td { font-weight: 600; color: #64748b; font-size: 0.8125rem; padding-top: 0.65rem; }
.wss-cf-table tr.wss-cf-line td { vertical-align: middle; }
.wss-cf-table tr.wss-cf-subtotal td { font-weight: 600; background: rgba(132, 60, 11, 0.06); border-top: 2px solid var(--tb-border-color); }
.wss-cf-table tr.wss-cf-grand td { font-weight: 700; background: rgba(32, 56, 100, 0.1); border-top: 2px solid var(--tb-primary); font-size: 0.9375rem; }
.wss-cf-table tr.wss-cf-summary td { background: #f8fafc; }
.wss-cf-table tr.wss-cf-spacer td { padding: 0.35rem; border: none; background: transparent; }
.wss-cf-table td:last-child { min-width: 10rem; white-space: nowrap; }
.wss-cf-source-card { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.wss-cf-source-card:hover { border-color: var(--tb-primary) !important; box-shadow: 0 2px 8px rgba(132, 60, 11, 0.08); }

/* HR & Payroll */
.wss-hr-slip { max-width: 720px; margin: 0 auto; border: 1px solid var(--tb-border-color); }
.wss-hr-slip-header { border-bottom: 2px solid var(--tb-primary); }
.wss-hr-action-card { transition: transform 0.15s ease; }
.wss-hr-action-card:hover { transform: translateY(-2px); }
.wss-payroll-flow { border-left: 3px solid var(--tb-primary); padding-left: 1rem; }

/* Governance & Administration */
.wss-wf-builder { min-height: 200px; }
.wss-wf-stage { display: inline-block; }
.wss-perm-matrix input.form-check-input { cursor: pointer; }
.wss-settings-tab-pane { min-height: 320px; }

/* ERP Integration (Chunk 13) */
.wss-demo-banner { border-left: 4px solid var(--tb-primary); }

/* Header layout fix (Chunk 14) */
.wss-navbar-header { min-height: var(--tb-header-height, 70px); }
#page-topbar {
    z-index: 1005 !important;
}
#page-topbar,
#page-topbar .layout-width,
#page-topbar .navbar-header,
#page-topbar .wss-header-right,
#page-topbar .wss-header-tools,
#page-topbar .wss-header-actions {
    overflow: visible !important;
}
#page-topbar .navbar-header .dropdown.topbar-head-dropdown {
    position: static;
}
#page-topbar .navbar-header .dropdown.topbar-head-dropdown .dropdown-menu {
    z-index: 1105 !important;
}
.wss-header-right { gap: 0.25rem; max-width: calc(100% - 120px); min-width: 0; }
.wss-header-tools { gap: 0.35rem; flex-wrap: nowrap; align-items: center; min-width: 0; }
.wss-header-actions { gap: 0.35rem; align-items: center; min-width: 0; }
.wss-header-dropdown { min-width: min(300px, calc(100vw - 2rem)); }
.wss-header-dropdown-sm { min-width: min(280px, calc(100vw - 2rem)); }
.wss-header-tools .header-item,
.wss-header-actions .header-item { display: flex; align-items: center; height: 38px; margin: 0; padding: 0; }
.wss-header-tools .btn-topbar,
.wss-header-actions .btn-topbar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
.wss-header-icon { font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.wss-header-actions .topbar-user .btn { display: flex; align-items: center; height: 38px; }
.wss-header-actions .header-profile-user,
.wss-header-actions .wss-header-avatar {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.wss-demo-banner .form-check-input { margin-top: 0; flex-shrink: 0; }
.wss-demo-banner .form-check-label { white-space: nowrap; }
.wss-quick-actions { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1040; }
.wss-qa-toggle {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: none;
    box-shadow: 0 4px 14px rgba(132, 60, 11, 0.35);
}
.wss-qa-toggle i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
    margin: 0;
    transition: transform 0.22s ease;
}
.wss-quick-actions.is-open .wss-qa-toggle i {
    transform: rotate(45deg);
}
.wss-qa-panel {
    position: absolute;
    bottom: 62px;
    right: 0;
    width: 220px;
    background: #fff;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}
.wss-qa-panel.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.wss-workflow-nav { border-left: 4px solid var(--tb-primary); background: var(--tb-light); }
.wss-sitemap-tree ul { list-style: none; padding-left: 1.25rem; }
.wss-sitemap-tree > ul { padding-left: 0; }
.wss-notif-badge { font-size: 10px; padding: 0.2em 0.45em; }
@media (max-width: 767.98px) {
    .wss-quick-actions { bottom: 1rem; right: 1rem; }
    .wss-qa-panel { width: 200px; }
}

/* ERP UX Enhancement (Chunk 14) */
body:not(.wss-loaded) .page-content { opacity: 0.6; }
body.wss-loaded .page-content { opacity: 1; transition: opacity 0.25s ease; }
.wss-cmd-palette { position: fixed; inset: 0; z-index: 2000; display: none; }
.wss-cmd-palette.show { display: block; }
.wss-cmd-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); }
.wss-cmd-dialog { position: relative; max-width: 560px; margin: 10vh auto 0; background: #fff; border-radius: 0.5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.2); overflow: hidden; }
.wss-cmd-item { padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--tb-border-color); }
.wss-cmd-item:hover, .wss-cmd-item.active { background: rgba(64,81,137,0.08); }
.wss-cmd-results { max-height: 360px; overflow-y: auto; }
.wss-filter-drawer { position: fixed; inset: 0; z-index: 1990; pointer-events: none; }
.wss-filter-drawer.show { pointer-events: auto; }
.wss-filter-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s; }
.wss-filter-drawer.show .wss-filter-backdrop { opacity: 1; }
.wss-filter-panel { position: absolute; top: 0; right: 0; width: 340px; max-width: 90vw; height: 100%; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.1); transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; }
.wss-filter-drawer.show .wss-filter-panel { transform: translateX(0); }
.wss-notes-panel {
    position: fixed;
    bottom: 5rem;
    left: calc(var(--tb-vertical-menu-width) + 1.5rem);
    z-index: 1035;
    max-width: min(280px, calc(100vw - var(--tb-vertical-menu-width) - 3rem));
}
[data-layout=vertical][data-sidebar-size=md] .wss-notes-panel {
    left: calc(var(--tb-vertical-menu-width-md, 180px) + 1.5rem);
    max-width: min(280px, calc(100vw - var(--tb-vertical-menu-width-md, 180px) - 3rem));
}
[data-layout=vertical][data-sidebar-size=sm] .wss-notes-panel {
    left: calc(var(--tb-vertical-menu-width-sm, 70px) + 1.5rem);
    max-width: min(280px, calc(100vw - var(--tb-vertical-menu-width-sm, 70px) - 3rem));
}
@media (max-width: 767.98px) {
    .wss-notes-panel {
        left: 1.5rem;
        max-width: min(280px, calc(100vw - 3rem));
    }
}
.wss-notes-body { background: #fff; border: 1px solid var(--tb-border-color); border-radius: 0.375rem; padding: 0.75rem; margin-top: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* Document detail pages (PO, GRN, etc.) */
.wss-doc-hero {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 55%, rgba(132, 60, 11, 0.04) 100%);
    border-left: 4px solid var(--tb-primary) !important;
}
.wss-doc-type-badge {
    background: rgba(132, 60, 11, 0.1);
    color: var(--tb-primary);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}
.wss-doc-title { font-weight: 600; color: #1e293b; }

/* Bank reconciliation report */
.wss-recon-report-card { overflow: hidden; }
.wss-recon-report-table td {
    padding: 0.65rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.wss-recon-report-table tr:last-child td { border-bottom: none; }
.wss-recon-report-section td {
    background: rgba(32, 56, 100, 0.06);
    color: var(--wss-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.wss-recon-report-base td { background: #fff; }
.wss-recon-report-indent { padding-left: 2rem !important; color: #475569; }
.wss-recon-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    font-weight: 700;
    margin-right: 0.35rem;
}
.wss-recon-report-total td {
    background: rgba(132, 60, 11, 0.06);
    border-top: 2px solid rgba(132, 60, 11, 0.2);
    font-weight: 600;
}
.wss-recon-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
}
.wss-recon-summary-diff {
    border-color: rgba(255, 108, 108, 0.35);
    background: rgba(255, 108, 108, 0.06);
}
.wss-recon-summary-label {
    font-size: 0.8125rem;
    color: #64748b;
}
.wss-recon-summary-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}
.letter-spacing-sm { letter-spacing: 0.04em; }
.fs-xs { font-size: 0.6875rem; }
@media (max-width: 991.98px) {
    .wss-recon-report-card .border-start { border-left: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; }
}

.wss-doc-stats { border-top: 1px solid rgba(0,0,0,.06); padding-top: 1rem; }
.wss-doc-stat {
    background: #fff;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    height: 100%;
}
.wss-doc-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.wss-doc-stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}
.wss-doc-main-card .card-header { border-color: rgba(0,0,0,.06) !important; }
.wss-doc-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: var(--tb-vertical-menu-item-font-size, 0.8125rem);
    font-weight: var(--tb-vertical-menu-item-font-weight, 400);
    color: #64748b;
    border-radius: 2rem;
    padding: 0.45rem 0.9rem;
    transition: all 0.15s ease;
}
.wss-doc-tabs .nav-link > i[class*="ph-"],
.nav-tabs-custom .nav-link > i[class*="ph-"],
.page-content [data-bs-toggle="tab"].nav-link > i[class*="ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    min-width: 1.75rem;
    font-size: calc(var(--tb-vertical-menu-item-font-size, 0.8125rem) * 1.3);
    line-height: 1;
    margin-right: 0 !important;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.nav-tabs-custom .nav-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}
.wss-doc-tabs .nav-link:hover { color: var(--tb-primary); background: rgba(132, 60, 11, 0.06); }
.wss-doc-tabs .nav-link.active {
    background: var(--tb-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(132, 60, 11, 0.25);
}
.wss-doc-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.wss-info-grid .wss-info-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.5rem;
    background: #f8fafc;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wss-info-grid .wss-info-card:hover {
    border-color: rgba(132, 60, 11, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.wss-info-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.wss-info-body {
    min-width: 0;
    flex: 1;
}
.wss-info-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.2rem;
}
.wss-info-value {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.35;
    word-break: break-word;
}
.wss-info-value .badge { font-size: 0.7rem; font-weight: 600; }
.wss-doc-table thead th {
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.wss-doc-table tbody td,
.wss-doc-table tfoot td {
    font-size: 0.875rem;
    white-space: nowrap;
    vertical-align: middle;
}
.wss-doc-table {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}
.wss-doc-main-card .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
table.wss-doc-table .btn-subtle-secondary.btn-icon { border-color: rgba(32, 56, 100, 0.5); }
table.wss-doc-table .btn-subtle-success.btn-icon { border-color: rgba(10, 179, 156, 0.55); }
table.wss-doc-table .btn-subtle-danger.btn-icon { border-color: rgba(240, 101, 72, 0.55); }
table.wss-doc-table .btn-subtle-info.btn-icon { border-color: rgba(41, 156, 219, 0.55); }
table.wss-doc-table .btn-subtle-warning.btn-icon { border-color: rgba(201, 138, 0, 0.55); }
table.wss-doc-table .btn-subtle-primary.btn-icon:hover { border-color: #843c0b; }
table.wss-doc-table .btn-subtle-secondary.btn-icon:hover { border-color: #203864; }
table.wss-doc-table .btn-subtle-success.btn-icon:hover { border-color: #0ab39c; }
table.wss-doc-table .btn-subtle-danger.btn-icon:hover { border-color: #f06548; }
table.wss-doc-table .btn-subtle-info.btn-icon:hover { border-color: #299cdb; }
table.wss-doc-table .btn-subtle-warning.btn-icon:hover { border-color: #c98a00; }
.wss-doc-actions .wss-action-btn,
.wss-doc-actions .wss-dt-btn {
    border: 1px solid var(--tb-border-color);
    background: #fff;
    color: var(--tb-body-color);
}
.wss-doc-actions .wss-action-btn:hover,
.wss-doc-actions .wss-dt-btn:hover {
    background: var(--tb-light);
    border-color: var(--tb-border-color);
    color: var(--tb-body-color);
}
table.wss-doc-table .pd-doc-files-cell .wss-action-btn {
    border: 1px solid var(--tb-border-color);
    background: #fff;
    color: var(--tb-body-color);
}
table.wss-doc-table .pd-doc-files-cell .wss-action-btn:hover,
table.wss-doc-table .pd-doc-files-cell .wss-action-btn:focus {
    background: var(--tb-light);
    border-color: var(--tb-border-color);
    color: var(--tb-body-color);
    box-shadow: none;
}
#wssNotesSlot.card { margin-bottom: 0; }
.wss-term-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.5rem;
    background: #fff;
    height: 100%;
}
.wss-term-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.wss-file-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.5rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wss-file-card:hover { border-color: rgba(132, 60, 11, 0.35); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.wss-file-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.wss-approval-timeline { position: relative; }
.wss-approval-step {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    position: relative;
}
.wss-approval-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.wss-approval-step.is-done:not(:last-child)::before { background: rgba(132, 60, 11, 0.25); }
.wss-approval-marker {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    z-index: 1;
}
.wss-approval-step.is-done .wss-approval-marker {
    background: var(--tb-primary);
    border-color: var(--tb-primary);
    color: #fff;
}
.wss-approval-step.is-pending .wss-approval-marker {
    background: #fff;
    border-color: var(--tb-warning);
    color: var(--tb-warning);
}
.wss-approval-content { flex: 1; min-width: 0; padding-top: 0.15rem; }
.wss-audit-timeline { position: relative; padding-left: 0.25rem; }
.wss-audit-item {
    display: flex;
    gap: 0.85rem;
    padding-bottom: 1.25rem;
    position: relative;
}
.wss-audit-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 1.1rem;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.wss-audit-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
    z-index: 1;
}
.wss-comm-item { padding: 0.75rem 0 0.75rem 1rem; background: #f8fafc; border-radius: 0 0.375rem 0.375rem 0; }
.wss-related-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.wss-related-link:hover {
    background: rgba(132, 60, 11, 0.05);
    border-color: rgba(132, 60, 11, 0.25);
    color: var(--tb-primary);
}
.wss-doc-sidebar {
    position: sticky;
    top: 5.5rem;
    align-self: flex-start;
}
@media (max-width: 1199.98px) {
    .wss-doc-sidebar { position: static; }
}
@media (max-width: 991.98px) {
    .wss-doc-page .wss-doc-hero .card-body,
    .wss-doc-page .wss-doc-main-card .card-body { padding: 1.25rem !important; }
    .wss-doc-page .wss-doc-main-card .card-header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .wss-doc-page .wss-doc-hero > .card-body > .d-flex { gap: 1rem !important; }
    .wss-doc-page .wss-doc-actions {
        width: 100%;
        gap: 0.5rem !important;
    }
    .wss-doc-page .wss-doc-actions .wss-action-btn,
    .wss-doc-page .wss-doc-actions .wss-dt-btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
        min-width: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    #wssWorkflowNav .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }
    #wssWorkflowNav .d-flex::-webkit-scrollbar { display: none; }
    #wssWorkflowNav .btn { flex-shrink: 0; }
}
@media (max-width: 767.98px) {
    .wss-doc-page .page-content { padding-bottom: 5rem; }
    .wss-doc-page .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    .wss-doc-page .wss-doc-hero .card-body,
    .wss-doc-page .wss-doc-main-card .card-body { padding: 1rem !important; }
    .wss-doc-page .wss-doc-main-card .card-header { padding-left: 1rem !important; padding-right: 1rem !important; }
    .wss-doc-page .wss-doc-title { font-size: 1.2rem; line-height: 1.35; word-break: break-word; }
    .wss-doc-page .wss-doc-actions .wss-dt-btn span { font-size: 0.75rem; }
    .wss-doc-page .wss-doc-stat { padding: 0.65rem 0.75rem; }
    .wss-doc-page .wss-doc-stat-value { font-size: 0.9rem; }
    .wss-doc-page .wss-doc-tabs {
        flex-wrap: nowrap !important;
        padding-bottom: 0.75rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .wss-doc-page .wss-doc-tabs::-webkit-scrollbar { display: none; }
    .wss-doc-page .wss-info-grid .wss-info-card { padding: 0.75rem; }
    .wss-doc-page .wss-file-card { gap: 0.65rem; padding: 0.75rem; }
    .wss-doc-page .wss-file-card h6 { font-size: 0.8125rem; }
    .wss-doc-page .wss-term-card { padding: 0.85rem; }
    .wss-doc-page .wss-related-link { padding: 0.6rem 0.75rem; font-size: 0.8125rem; }
    .wss-demo-banner .d-flex { flex-direction: column; align-items: flex-start !important; gap: 0.5rem !important; }
    .wss-demo-banner .d-flex > span:first-child { font-size: 0.8125rem; line-height: 1.4; }
}
@media (max-width: 575.98px) {
    .wss-doc-page .wss-doc-actions .wss-dt-btn span { display: none; }
    .wss-doc-page .wss-doc-actions .wss-action-btn,
    .wss-doc-page .wss-doc-actions .wss-dt-btn {
        flex: 1 1 calc(25% - 0.375rem);
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .wss-doc-page .wss-doc-type-badge { font-size: 0.6875rem; }
}
@media print {
    .wss-doc-actions, .wss-doc-sidebar, .wss-notes-panel, .wss-quick-actions { display: none !important; }
    .wss-doc-hero { box-shadow: none !important; }
    .col-xl-8 { width: 100% !important; }
}

.wss-tour-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; padding: 2rem; }
.wss-tour-overlay.show { display: flex; }
.wss-tour-card { background: #fff; border-radius: 0.5rem; padding: 1.5rem; max-width: 420px; box-shadow: 0 1rem 2rem rgba(0,0,0,.2); }
.wss-demo-mode #wssWorkflowNav { outline: 2px dashed var(--tb-primary); outline-offset: 4px; }
.wss-demo-mode .wss-workflow-nav .btn-primary { animation: wss-pulse 2s infinite; }
@keyframes wss-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(64,81,137,.4); } 50%{ box-shadow: 0 0 0 6px rgba(64,81,137,0); } }
.wss-table-wrap,
.card-body > .table-responsive,
.card-body .dataTables_wrapper,
.wss-smart-table.dataTables_wrapper {
    overflow: visible;
    max-height: none;
    height: auto;
}
.card-body > .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.card-body .dataTables_wrapper {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
}
.card-body .dataTables_wrapper .dataTables_scroll,
.card-body .dataTables_wrapper > .row:has(table) {
    overflow-x: auto;
    max-width: 100%;
}
.card-body .dataTables_wrapper table,
.card-body > .table-responsive table,
table[data-wss-table] {
    width: max-content !important;
    min-width: 100%;
    margin-bottom: 0;
}
.card-body .dataTables_wrapper table th,
.card-body .dataTables_wrapper table td,
.card-body > .table-responsive table th,
.card-body > .table-responsive table td,
table[data-wss-table] th,
table[data-wss-table] td {
    white-space: nowrap;
    vertical-align: middle;
}
/* Sticky first column — stays fixed during horizontal scroll (opaque bg so scroll content does not bleed through) */
table[data-wss-table].wss-sticky-first-col thead th.wss-sticky-col,
table[data-wss-table].wss-sticky-first-col tbody td.wss-sticky-col,
table[data-wss-table-simple].wss-sticky-first-col thead th.wss-sticky-col,
table[data-wss-table-simple].wss-sticky-first-col tbody td.wss-sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 2px 0 6px -3px rgba(15, 23, 42, 0.12);
}
table[data-wss-table].wss-sticky-first-col thead th.wss-sticky-col,
table[data-wss-table-simple].wss-sticky-first-col thead th.wss-sticky-col {
    z-index: 3;
    background-color: #f3f6f9;
}
table[data-wss-table].wss-sticky-first-col.table-striped > tbody > tr:nth-of-type(odd) > td.wss-sticky-col,
table[data-wss-table-simple].wss-sticky-first-col.table-striped > tbody > tr:nth-of-type(odd) > td.wss-sticky-col {
    background-color: #f9fafb;
}
table[data-wss-table].wss-sticky-first-col.table-striped > tbody > tr:nth-of-type(even) > td.wss-sticky-col,
table[data-wss-table-simple].wss-sticky-first-col.table-striped > tbody > tr:nth-of-type(even) > td.wss-sticky-col {
    background-color: #fff;
}
table[data-wss-table].wss-sticky-first-col.table-hover > tbody > tr:hover > td.wss-sticky-col,
table[data-wss-table-simple].wss-sticky-first-col.table-hover > tbody > tr:hover > td.wss-sticky-col {
    background-color: #eef1f5;
}
.card-body .dataTables_wrapper table .d-flex,
.card-body .dataTables_wrapper table ul {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.card-body .dataTables_wrapper table.dtr-inline.collapsed tbody tr.child {
    display: none !important;
}
.wss-actions-col,
table[data-wss-table] th.wss-actions-col,
table[data-wss-table] td:has(.btn-icon),
table.wss-doc-table th.wss-actions-col,
table.wss-doc-table td.wss-actions-col {
    text-align: right !important;
}
.wss-amount-col,
.card-body table th.text-end,
.card-body table td.text-end,
.card-body table th.wss-amount-col,
.card-body table td.wss-amount-col,
.page-content table th.text-end,
.page-content table td.text-end,
.page-content table th.wss-amount-col,
.page-content table td.wss-amount-col,
table[data-wss-table] th.text-end,
table[data-wss-table] td.text-end,
table[data-wss-table] th.wss-amount-col,
table[data-wss-table] td.wss-amount-col,
.card-body .dataTables_wrapper table th.wss-amount-col,
.card-body .dataTables_wrapper table td.wss-amount-col {
    text-align: right !important;
}
.card-body .dataTables_wrapper table td.wss-amount-col .d-flex,
.card-body .dataTables_wrapper table td.wss-amount-col ul,
.card-body table td.wss-amount-col .d-flex,
.card-body table td.wss-amount-col ul,
.page-content table td.wss-amount-col .d-flex,
.page-content table td.wss-amount-col ul,
table[data-wss-table] td.wss-amount-col .d-flex,
table[data-wss-table] td.wss-amount-col ul {
    justify-content: flex-end;
}
/* DataTables sort arrows — vertically centered in header cells */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:after {
    line-height: 1;
    margin: 0;
    font-size: 0.85em;
    transform: none;
}
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    top: auto;
    bottom: 50%;
    margin-bottom: 1px;
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    top: 50%;
    bottom: auto;
    margin-top: 1px;
}
table.dataTable > thead .sorting,
table.dataTable > thead .sorting_asc,
table.dataTable > thead .sorting_desc,
table.dataTable > thead .sorting_asc_disabled,
table.dataTable > thead .sorting_desc_disabled {
    vertical-align: middle;
}
.wss-actions-col > ul,
.wss-actions-col > .d-flex,
table[data-wss-table] td:has(.btn-icon) > ul,
table[data-wss-table] td:has(.btn-icon) > .d-flex {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: 0;
}
.card-body .dataTables_wrapper table .btn-icon,
table[data-wss-table] .btn-icon,
.wss-file-card .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    line-height: 1;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
}
.card-body .dataTables_wrapper table .btn-icon i,
table[data-wss-table] .btn-icon i,
.wss-file-card .btn-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    font-size: 0.95rem;
}
.card-body .dataTables_wrapper table .btn-subtle-primary.btn-icon,
table[data-wss-table] .btn-subtle-primary.btn-icon,
table.wss-doc-table .btn-subtle-primary.btn-icon,
.wss-file-card .btn-subtle-primary.btn-icon {
    border-color: rgba(132, 60, 11, 0.55);
}
.card-body .dataTables_wrapper table .btn-subtle-secondary.btn-icon,
table[data-wss-table] .btn-subtle-secondary.btn-icon,
.wss-file-card .btn-subtle-secondary.btn-icon {
    border-color: rgba(32, 56, 100, 0.5);
}
.card-body .dataTables_wrapper table .btn-subtle-success.btn-icon,
table[data-wss-table] .btn-subtle-success.btn-icon,
.wss-file-card .btn-subtle-success.btn-icon {
    border-color: rgba(10, 179, 156, 0.55);
}
.card-body .dataTables_wrapper table .btn-subtle-danger.btn-icon,
table[data-wss-table] .btn-subtle-danger.btn-icon,
.wss-file-card .btn-subtle-danger.btn-icon {
    border-color: rgba(240, 101, 72, 0.55);
}
.card-body .dataTables_wrapper table .btn-subtle-info.btn-icon,
table[data-wss-table] .btn-subtle-info.btn-icon,
.wss-file-card .btn-subtle-info.btn-icon {
    border-color: rgba(41, 156, 219, 0.55);
}
.card-body .dataTables_wrapper table .btn-subtle-warning.btn-icon,
table[data-wss-table] .btn-subtle-warning.btn-icon,
.wss-file-card .btn-subtle-warning.btn-icon {
    border-color: rgba(201, 138, 0, 0.55);
}
.card-body .dataTables_wrapper table .btn-subtle-primary.btn-icon:hover,
table[data-wss-table] .btn-subtle-primary.btn-icon:hover,
.wss-file-card .btn-subtle-primary.btn-icon:hover {
    border-color: #843c0b;
}
.card-body .dataTables_wrapper table .btn-subtle-secondary.btn-icon:hover,
table[data-wss-table] .btn-subtle-secondary.btn-icon:hover,
.wss-file-card .btn-subtle-secondary.btn-icon:hover {
    border-color: #203864;
}
.card-body .dataTables_wrapper table .btn-subtle-success.btn-icon:hover,
table[data-wss-table] .btn-subtle-success.btn-icon:hover,
.wss-file-card .btn-subtle-success.btn-icon:hover {
    border-color: #0ab39c;
}
.card-body .dataTables_wrapper table .btn-subtle-danger.btn-icon:hover,
table[data-wss-table] .btn-subtle-danger.btn-icon:hover,
.wss-file-card .btn-subtle-danger.btn-icon:hover {
    border-color: #f06548;
}
.card-body .dataTables_wrapper table .btn-subtle-info.btn-icon:hover,
table[data-wss-table] .btn-subtle-info.btn-icon:hover,
.wss-file-card .btn-subtle-info.btn-icon:hover {
    border-color: #299cdb;
}
.card-body .dataTables_wrapper table .btn-subtle-warning.btn-icon:hover,
table[data-wss-table] .btn-subtle-warning.btn-icon:hover,
.wss-file-card .btn-subtle-warning.btn-icon:hover {
    border-color: #c98a00;
}
.wss-dt-top { width: 100%; align-items: center; }
.wss-dt-toolbar-slot,
.wss-dt-toolbar-slot .wss-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.wss-dt-end { margin-left: auto !important; }
.wss-action-btn,
.wss-dt-top .wss-dt-btn,
.wss-dt-top .dt-buttons .dt-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0 0.75rem;
    line-height: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.375rem;
    box-shadow: none;
    vertical-align: middle;
    margin: 0;
}
.wss-action-btn i,
.wss-action-btn [class^="ph"],
.wss-dt-top .wss-dt-btn i,
.wss-dt-top .wss-dt-btn [class^="ph"],
.wss-dt-top .dt-buttons .dt-button i,
.wss-dt-top .dt-buttons .dt-button [class^="ph"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    font-size: 1rem;
    margin: 0 !important;
    flex-shrink: 0;
}
.wss-action-btn span,
.wss-dt-top .wss-dt-btn span,
.wss-dt-top .dt-buttons .dt-button span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.wss-dt-top .wss-dt-btn,
.wss-dt-top .dt-buttons .dt-button {
    border: 1px solid var(--tb-border-color);
    background: #fff;
    color: var(--tb-body-color);
}
.wss-dt-top .wss-dt-btn:hover,
.wss-dt-top .wss-dt-btn:focus,
.wss-dt-top .dt-buttons .dt-button:hover,
.wss-dt-top .dt-buttons .dt-button:focus {
    background: var(--tb-light);
    border-color: var(--tb-border-color);
    color: var(--tb-body-color);
    box-shadow: none;
}
.wss-page-toolbar .wss-action-btn {
    border: 1px solid rgba(32, 56, 100, 0.35);
    background: rgba(32, 56, 100, 0.06);
    color: var(--tb-body-color);
}
.wss-page-toolbar .wss-action-btn:hover,
.wss-page-toolbar .wss-action-btn:focus {
    background: rgba(32, 56, 100, 0.1);
    border-color: rgba(32, 56, 100, 0.55);
    color: var(--tb-body-color);
    box-shadow: none;
}
.wss-dt-top .wss-dt-btn.dropdown-toggle::after {
    margin-left: 0.15rem;
    vertical-align: middle;
    flex-shrink: 0;
}
.wss-dt-top .dropdown .wss-dt-btn { padding-right: 0.65rem; }

/* Icon + label vertical alignment in content buttons */
.main-content .btn:not(.btn-icon):not(.vertical-menu-btn):not(.topnav-hamburger),
.page-content .btn:not(.btn-icon):not(.vertical-menu-btn):not(.topnav-hamburger),
.wss-page-toolbar .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1.2;
    vertical-align: middle;
}
.main-content .btn:not(.btn-icon) > i,
.main-content .btn:not(.btn-icon) > [class*="ph"],
.main-content .btn:not(.btn-icon) > [class*="bi"],
.page-content .btn:not(.btn-icon) > i,
.page-content .btn:not(.btn-icon) > [class*="ph"],
.page-content .btn:not(.btn-icon) > [class*="bi"],
.wss-page-toolbar .btn > i,
.wss-page-toolbar .btn > [class*="ph"],
.wss-page-toolbar .btn > [class*="bi"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    margin: 0 !important;
    vertical-align: middle;
}
.main-content .btn:not(.btn-icon) > span,
.page-content .btn:not(.btn-icon) > span,
.wss-page-toolbar .btn > span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.main-content .btn:not(.btn-icon) i[class*="ph"]::before,
.page-content .btn:not(.btn-icon) i[class*="ph"]::before,
.wss-page-toolbar .btn i[class*="ph"]::before {
    line-height: 1;
}
.badge:has(> i),
.badge:has(> [class*="bi"]),
.badge:has(> [class*="ph"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
}
.badge > i,
.badge > [class*="bi"],
.badge > [class*="ph"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
    flex-shrink: 0;
}
.wss-smart-table.dataTables_wrapper .dataTables_length,
.wss-smart-table.dataTables_wrapper .dataTables_filter,
.wss-smart-table.dataTables_wrapper .dataTables_info,
.wss-smart-table.dataTables_wrapper .dataTables_paginate,
.wss-smart-table.dataTables_wrapper .dt-buttons {
    flex-shrink: 0;
    float: none !important;
    margin: 0;
    padding: 0;
    text-align: left;
}
.wss-smart-table.dataTables_wrapper .dataTables_length label,
.wss-smart-table.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    white-space: nowrap;
}
.wss-smart-table.dataTables_wrapper .dataTables_filter input {
    width: 12rem;
    margin-left: 0 !important;
}
.card-body .dataTables_wrapper .dataTables_info {
    font-size: 0.8125rem;
    color: var(--tb-secondary-color);
    padding-top: 0.35rem;
}
.card-body .dataTables_wrapper .dataTables_paginate,
.card-body .dataTables_wrapper .wss-dt-pagination {
    text-align: right;
    padding: 0;
    margin: 0;
}
.card-body .dataTables_wrapper .dataTables_paginate .pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-item {
    margin: 0 !important;
    padding: 0;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-item + .page-item .page-link {
    margin-left: 0 !important;
}
.card-body .dataTables_wrapper .dataTables_paginate li.paginate_button,
.card-body .dataTables_wrapper .dataTables_paginate li.page-item {
    display: inline-flex !important;
    align-items: center;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.625rem !important;
    height: 1.625rem !important;
    padding: 0 0.45rem !important;
    line-height: 1 !important;
    font-size: 0.75rem !important;
    font-weight: 500;
    border: 1px solid var(--tb-border-color) !important;
    border-radius: 0.3rem !important;
    background: #fff !important;
    color: var(--tb-body-color) !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    float: none !important;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--tb-primary) !important;
    border-color: var(--tb-primary) !important;
    color: #fff !important;
    z-index: 1;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
    background: #fff !important;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background: var(--tb-light) !important;
    border-color: var(--tb-border-color) !important;
    color: var(--tb-body-color) !important;
}
.card-body .dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover {
    background: var(--tb-primary) !important;
    border-color: var(--tb-primary) !important;
    color: #fff !important;
}
.card-body .dataTables_wrapper .dataTables_paginate a.paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.625rem !important;
    height: 1.625rem !important;
    padding: 0 0.45rem !important;
    line-height: 1 !important;
    font-size: 0.75rem !important;
    border: 1px solid var(--tb-border-color) !important;
    border-radius: 0.3rem !important;
    background: #fff !important;
    color: var(--tb-body-color) !important;
    margin: 0 !important;
    box-sizing: border-box;
    text-decoration: none !important;
}
.card-body .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    background: var(--tb-primary) !important;
    border-color: var(--tb-primary) !important;
    color: #fff !important;
}
.card-body .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.card-body .dataTables_wrapper .dataTables_paginate:not(:has(.pagination)) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem !important;
}
.card-body .dataTables_wrapper .dataTables_paginate:not(:has(.pagination)) > span {
    display: inline-flex !important;
    margin: 0 !important;
}
.wss-smart-table table thead th { position: sticky; top: 0; z-index: 2; background: var(--tb-light, #f3f6f9); }
.wss-smart-table table td:first-child,
.wss-smart-table table td.wss-sticky-col,
.wss-smart-table table th:first-child,
.wss-smart-table table th.wss-sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 2px 0 4px rgba(0,0,0,.04);
}
.wss-smart-table table thead th:first-child,
.wss-smart-table table thead th.wss-sticky-col {
    z-index: 3;
    background-color: var(--tb-light, #f3f6f9);
}
.wss-smart-table table.table-striped > tbody > tr:nth-of-type(odd) > td:first-child,
.wss-smart-table table.table-striped > tbody > tr:nth-of-type(odd) > td.wss-sticky-col {
    background-color: #f9fafb;
}
.wss-smart-table table.table-hover > tbody > tr:hover > td:first-child,
.wss-smart-table table.table-hover > tbody > tr:hover > td.wss-sticky-col {
    background-color: #eef1f5;
}
.wss-widget-col.wss-dragging { opacity: 0.5; }
.wss-empty-state { padding: 2rem 1rem; }
.wss-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 200px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    font-weight: 400;
}
.wss-table-empty i {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: #94a3b8;
    font-weight: 400;
}
.wss-table-empty-title,
.wss-table-empty-copy {
    display: block;
    font-weight: 400 !important;
}
.wss-table-empty-title {
    font-size: 0.9375rem;
    color: #475569;
}
.wss-table-empty-copy {
    font-size: 0.8125rem;
    color: #94a3b8;
}
table.dataTable td.dataTables_empty,
.wss-co-page td[colspan] {
    padding: 0 !important;
    height: 220px;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: normal !important;
    font-weight: 400 !important;
    background: #fff !important;
    border-bottom: 1px solid #e9ebec !important;
}
.wss-page-toolbar { flex-shrink: 0; }

.wss-table-filter.wss-filter-active,
.wss-page-filter.wss-filter-active {
    border-color: rgba(132, 60, 11, 0.55);
    background: rgba(132, 60, 11, 0.12);
    color: #843c0b;
    font-weight: 600;
}

button.wss-dt-btn.wss-table-filter-clear {
    border-color: rgba(220, 53, 69, 0.5);
    background: rgba(220, 53, 69, 0.1);
    color: #b02a37;
    font-weight: 600;
}

button.wss-dt-btn.wss-table-filter-clear:hover,
button.wss-dt-btn.wss-table-filter-clear:focus {
    border-color: #b02a37;
    background: rgba(220, 53, 69, 0.18);
    color: #8f2029;
}

/* Centered page loader — only rendered when a load is slow enough to notice */
.wss-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1.5px);
}
.wss-page-loader.show {
    display: flex;
    animation: wssPageLoaderIn 0.15s ease-out;
}
.wss-page-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(30, 32, 39, 0.15);
}
.wss-page-loader-text {
    font-size: 0.8125rem;
    color: var(--tb-body-color);
}
@keyframes wssPageLoaderIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
[data-bs-theme="dark"] .wss-page-loader { background: rgba(23, 25, 32, 0.55); }
[data-bs-theme="dark"] .wss-page-loader-box { background: #1e2027; }

/* Page title — title left; breadcrumb + filter/export stacked below lg, inline from lg up */
.page-title-box.d-sm-flex {
    width: 100%;
}
.page-title-box.d-sm-flex > .page-title-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    gap: 0.5rem;
    margin-left: auto !important;
    flex: 0 1 auto;
    min-width: min(100%, 16rem);
    max-width: 100%;
}
.page-title-box .page-title-right > .breadcrumb {
    align-self: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.page-title-box .page-title-right > .wss-page-toolbar {
    margin-top: 0;
    width: 100%;
}
.page-title-box .page-title-right > .wss-page-toolbar .wss-action-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 6.5rem;
}
@media (min-width: 992px) {
    .page-title-box.d-sm-flex > .page-title-right {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.75rem;
        min-width: 0;
    }
    .page-title-box .page-title-right > .breadcrumb {
        align-self: center;
        flex-shrink: 1;
        min-width: 0;
    }
    .page-title-box .page-title-right > .wss-page-toolbar {
        width: auto;
        flex-shrink: 0;
    }
    .page-title-box .page-title-right > .wss-page-toolbar .wss-action-btn {
        flex: 0 0 auto !important;
        min-width: 0;
    }
}
.wss-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: wss-shimmer 1.2s infinite; border-radius: 4px; height: 1rem; }
@keyframes wss-shimmer { 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* Embedded / dashboard tables — no toolbar, pagination, or horizontal overflow */
table[data-wss-table-simple],
.wss-table-simple table {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0;
    table-layout: fixed;
}
table[data-wss-table-simple] th,
table[data-wss-table-simple] td,
.wss-table-simple table th,
.wss-table-simple table td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wss-table-simple.dataTables_wrapper,
.card-body .wss-table-simple.dataTables_wrapper {
    overflow: visible !important;
    max-width: 100%;
}
.wss-table-simple .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}
.wss-table-simple .dataTables_wrapper > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
table[data-wss-table-simple] .btn-icon,
.wss-table-simple .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    line-height: 1;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
}
table[data-wss-table-simple] .btn-icon i,
.wss-table-simple .btn-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    font-size: 0.95rem;
}
table[data-wss-table-simple] .btn-subtle-primary.btn-icon,
.wss-table-simple .btn-subtle-primary.btn-icon {
    border-color: rgba(132, 60, 11, 0.55);
}
table[data-wss-table-simple] th.wss-actions-col,
table[data-wss-table-simple] td.wss-actions-col,
table[data-wss-table-simple] td:has(.btn-icon) {
    text-align: center !important;
    width: 4rem;
}

@media print {
    .app-menu, #page-topbar, .wss-quick-actions, .wss-demo-banner, .wss-notes-panel, .wss-filter-drawer, .wss-cmd-palette, .vertical-overlay { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .wss-print-page .card { border: none !important; box-shadow: none !important; }
    .wss-print-page .page-content { padding: 0 !important; }
    .wss-print-page table { font-size: 11px; }
    .wss-print-page .btn, .wss-print-page .wss-page-toolbar, .wss-print-page .wss-table-toolbar, .wss-print-page .wss-dt-top { display: none !important; }
}

/* App-wide responsive (reporting, HR, admin pages) */
@media (max-width: 991.98px) {
    .page-title-box .d-flex.gap-2 {
        flex-wrap: wrap;
        width: 100%;
    }
}
@media (max-width: 767.98px) {
    .page-content .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .page-title-box {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .page-title-box h4 {
        font-size: 1.2rem;
        line-height: 1.35;
        word-break: break-word;
    }
    .page-title-box .breadcrumb {
        width: 100%;
        margin-bottom: 0;
    }
    .page-title-box > .page-title-right {
        width: 100%;
        align-items: stretch;
        min-width: 0;
    }
    .page-title-box .page-title-right > .breadcrumb {
        align-self: flex-start;
        white-space: normal;
        flex-wrap: wrap;
    }
    .page-title-box > .wss-page-toolbar,
    .page-title-box > .page-title-right > .wss-page-toolbar {
        width: 100%;
    }
    .page-title-box .page-title-right > .wss-page-toolbar .wss-action-btn {
        flex: 1 1 calc(50% - 0.25rem);
    }
    .page-title-box .d-flex.gap-2 {
        gap: 0.5rem !important;
    }
    .page-title-box .d-flex.gap-2 .btn,
    .page-title-box .d-flex.gap-2 > a.btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
    .card-header.d-flex.align-items-center {
        gap: 0.65rem !important;
    }
    .card-header.d-flex.align-items-center .card-title.flex-grow-1 {
        min-width: 0;
        word-break: break-word;
    }
    .card-header.d-flex.align-items-center .btn {
        margin-left: auto;
        flex-shrink: 0;
    }
    .wss-doc-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .wss-doc-tabs::-webkit-scrollbar { display: none; }
    .card.border-0.shadow-sm > .card-header.bg-transparent {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .card.border-0.shadow-sm > .card-body.p-4 {
        padding: 1rem !important;
    }
    .wss-pnl-table {
        font-size: 0.8125rem;
    }
    .wss-pnl-table tr.wss-pnl-deduct td:first-child {
        padding-left: 1rem;
    }
    .wss-payroll-flow p {
        line-height: 1.5;
        word-break: break-word;
    }
    .wss-report-card .d-flex.gap-2 {
        flex-wrap: wrap;
    }
    .wss-report-card .d-flex.gap-2 .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
    .wss-auditor-panel .btn {
        font-size: 0.8125rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .page-content {
        padding-bottom: 5rem;
    }
}
@media (max-width: 575.98px) {
    .page-title-box h4 {
        font-size: 1.1rem;
    }
    .page-title-box .d-flex.gap-2 .btn,
    .page-title-box .d-flex.gap-2 > a.btn {
        flex: 1 1 100%;
    }
    .card-header.d-flex.align-items-center {
        flex-wrap: wrap;
    }
    .card-header.d-flex.align-items-center .btn {
        margin-left: auto;
    }
    .row.wss-equal-height > [class*="col-"] {
        margin-bottom: 0;
    }
    .wss-auditor-panel .col-6 .btn {
        font-size: 0.75rem;
    }
    .wss-auditor-panel .col-6 .btn i {
        display: none;
    }
}

/* WSS AI Copilot slide panel */
.wss-copilot-drawer {
    position: fixed;
    inset: 0;
    z-index: 2010;
    pointer-events: none;
}
.wss-copilot-drawer.show {
    pointer-events: auto;
}
.wss-copilot-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.wss-copilot-drawer.show .wss-copilot-backdrop {
    opacity: 1;
}
.wss-copilot-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(440px, 100vw);
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.wss-copilot-drawer.show .wss-copilot-panel {
    transform: translateX(0);
}
.wss-copilot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tb-border-color);
    flex-shrink: 0;
}
.wss-copilot-header-title {
    min-width: 0;
    flex: 1 1 auto;
}
.wss-copilot-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem;
    background: var(--tb-light, #f8f9fa);
    min-height: 0;
}
.wss-copilot-body-active {
    background: #fff;
}
.wss-copilot-footer {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--tb-border-color);
    background: #fff;
}
.wss-copilot-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.wss-copilot-suggestion {
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.wss-copilot-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(64, 81, 137, 0.12), rgba(64, 81, 137, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--tb-primary);
}
.wss-copilot-history .wss-copilot-thread {
    margin-bottom: 1.25rem;
    min-width: 0;
}
.wss-copilot-history {
    min-width: 0;
}
.wss-copilot-thread .wss-copilot-q p,
.wss-copilot-a p,
.wss-copilot-a li {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.wss-copilot-history .wss-copilot-thread:last-child {
    margin-bottom: 0;
}
.wss-copilot-composer {
    position: relative;
    width: 100%;
}
.wss-copilot-composer textarea {
    width: 100%;
    padding: 0.65rem 2.85rem 0.65rem 0.85rem;
    resize: none;
    border-radius: 0.625rem;
    border: 1px solid var(--tb-border-color);
    min-height: 2.75rem;
    max-height: 8rem;
    line-height: 1.45;
}
.wss-copilot-composer textarea:focus {
    border-color: rgba(64, 81, 137, 0.45);
    box-shadow: 0 0 0 0.15rem rgba(64, 81, 137, 0.1);
}
.wss-copilot-send {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    width: 1.85rem;
    height: 1.85rem;
    border: none;
    border-radius: 50%;
    background: var(--tb-primary, #405189);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.wss-copilot-send:hover {
    background: #354572;
}
.wss-copilot-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.wss-copilot-thread .wss-copilot-q {
    background: rgba(64, 81, 137, 0.06);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.wss-copilot-thread .wss-copilot-a {
    padding: 0.25rem 0;
    min-width: 0;
    max-width: 100%;
}
.wss-copilot-chart-mount,
.wss-copilot-a .apexcharts-canvas,
.wss-copilot-a .apexcharts-svg {
    max-width: 100%;
}
.wss-copilot-kpi-row .border.rounded {
    min-width: 0;
}
.wss-copilot-a-meta {
    min-height: 1.75rem;
}
.wss-copilot-turn-dl {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
}
.wss-copilot-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    border: 1px solid var(--tb-border-color);
    border-radius: 0.375rem;
    -webkit-overflow-scrolling: touch;
}
.wss-copilot-table {
    font-size: 0.6875rem;
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}
.wss-copilot-table th,
.wss-copilot-table td {
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
    vertical-align: middle;
    border-right: 1px solid var(--tb-border-color);
}
.wss-copilot-table th:last-child,
.wss-copilot-table td:last-child {
    border-right: none;
}
.wss-copilot-table thead th {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.wss-copilot-trigger .ph-sparkle {
    color: var(--tb-primary);
}
.wss-copilot-trigger:hover .ph-sparkle,
.wss-copilot-drawer.show + .wss-copilot-trigger .ph-sparkle {
    color: var(--tb-primary);
}
body.wss-copilot-open {
    overflow: hidden;
}
.wss-copilot-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 200px;
    padding-top: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.wss-copilot-bar-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}
.wss-copilot-bar-fill {
    width: 100%;
    max-width: 28px;
    border-radius: 4px 4px 0 0;
    margin-top: auto;
    transition: height 0.3s ease;
}
.wss-copilot-bar-label {
    font-size: 0.62rem;
    color: var(--tb-secondary-color);
    margin-top: 0.35rem;
    text-align: center;
    line-height: 1.1;
    word-break: break-word;
}
@media (max-width: 575.98px) {
    .wss-copilot-panel {
        width: 100vw;
    }
    .wss-copilot-header,
    .wss-copilot-body,
    .wss-copilot-footer {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }
    .wss-copilot-footer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
    .wss-copilot-suggestion {
        font-size: 0.7rem;
        max-width: 100%;
    }
    .wss-copilot-bar-chart {
        height: 160px;
    }
    .wss-copilot-bar-col {
        min-width: 1.45rem;
        flex: 0 0 auto;
    }
    .wss-copilot-composer textarea {
        font-size: 16px;
    }
}
@media (max-width: 767.98px) and (min-width: 576px) {
    .wss-copilot-panel {
        width: min(420px, 100vw);
    }
}

/* Proforma invoice line item autosuggest */
.wss-item-suggest-wrap { position: relative; }
.wss-item-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 0.375rem;
}
.wss-item-suggest .list-group-item {
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 0.45rem 0.65rem;
}
.wss-item-suggest .list-group-item:hover,
.wss-item-suggest .list-group-item.active {
    background: rgba(132, 60, 11, 0.08);
    color: #843c0b;
}
#piLinesTable .form-control-sm,
#piLinesTable .form-select-sm { min-width: 4.5rem; }
#piLinesTable td:first-child { min-width: 200px; }

.wss-pi-summary {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(32, 56, 100, 0.1);
    background: #fff;
    box-shadow: 0 6px 20px rgba(32, 56, 100, 0.07);
}
.wss-pi-summary-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--wss-secondary, #203864);
    background: linear-gradient(135deg, rgba(132, 60, 11, 0.07) 0%, rgba(32, 56, 100, 0.05) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wss-pi-summary-body { padding: 0.9rem 1rem 1rem; }
.wss-pi-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
}
.wss-pi-summary-row > span:first-child { color: #64748b; font-size: 0.8125rem; }
.wss-pi-summary-val {
    font-weight: 600;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wss-pi-summary-divider {
    height: 1px;
    margin: 0.65rem 0;
    background: linear-gradient(90deg, transparent, rgba(32, 56, 100, 0.12), transparent);
}
.wss-pi-discount-box {
    margin: 0.75rem 0 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(32, 56, 100, 0.035);
    border: 1px dashed rgba(32, 56, 100, 0.14);
}
.wss-pi-discount-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}
.wss-pi-disc-toggle {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: rgba(32, 56, 100, 0.08);
    flex-shrink: 0;
}
.wss-pi-disc-toggle .btn-check { position: absolute; clip: rect(0, 0, 0, 0); }
.wss-pi-disc-toggle label {
    margin: 0;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--wss-secondary, #203864);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wss-pi-disc-toggle .btn-check:checked + label {
    background: #fff;
    color: var(--wss-primary, #843c0b);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.wss-pi-gst-box {
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(132, 60, 11, 0.04);
    border: 1px solid rgba(132, 60, 11, 0.1);
}
.wss-pi-gst-box .form-check-label { font-size: 0.8125rem; font-weight: 500; }
.wss-pi-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(90deg, rgba(132, 60, 11, 0.12) 0%, rgba(132, 60, 11, 0.04) 100%);
    border-top: 2px solid rgba(132, 60, 11, 0.18);
}
.wss-pi-summary-total > span:first-child {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #334155;
}
.wss-pi-summary-total > span:last-child {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--wss-primary, #843c0b);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* CRM Module */
.wss-crm-dash-table-body {
    padding: 0 1.25rem 1.25rem;
}
.wss-kanban-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; min-height: 420px; }
.wss-kanban-col { flex: 0 0 280px; background: rgba(32, 56, 100, 0.04); border-radius: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.06); }
.wss-kanban-col-head,
.wss-kanban-col-header { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8125rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
.wss-kanban-col-head h6,
.wss-kanban-col-header h6 { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 0; gap: 0.5rem; }
.wss-kanban-col-head .wss-kanban-col-count,
.wss-kanban-col-header .wss-kanban-col-count { margin-left: auto; flex-shrink: 0; }
.wss-kanban-col-value { display: block; font-size: 0.8125rem; font-weight: 600; color: #0ab39c; line-height: 1.2; }
.wss-kanban-col-body { padding: 0.5rem; min-height: 200px; }
.wss-kanban-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); cursor: grab; transition: box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease; user-select: none; }
.wss-kanban-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.wss-kanban-card.wss-kanban-dragging { opacity: 0.55; cursor: grabbing; transform: rotate(1deg); }
.wss-kanban-col-body.wss-kanban-drop-over { background: rgba(132, 60, 11, 0.06); outline: 2px dashed rgba(132, 60, 11, 0.35); outline-offset: -4px; border-radius: 0 0 0.5rem 0.5rem; }
.crm-cal-table td { height: 90px; vertical-align: top; width: 14.28%; }
.crm-cal-day { padding: 0.35rem; }
.crm-cal-today { background: rgba(132, 60, 11, 0.08); }
.crm-cal-date { font-weight: 600; font-size: 0.8125rem; display: block; margin-bottom: 0.25rem; }
.crm-cal-event { display: block; font-size: 0.6875rem; padding: 0.15rem 0.35rem; border-radius: 0.25rem; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-cal-event-meeting { background: rgba(41, 156, 219, 0.15); color: #1a6fa8; }
.crm-cal-event-task { background: rgba(10, 179, 156, 0.15); color: #0a8f7c; }
.crm-cal-event-followup { background: rgba(247, 184, 75, 0.2); color: #9a6a00; }
.crm-cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.crm-cal-legend-dot.crm-cal-event-meeting { background: #299cdb; }
.crm-cal-legend-dot.crm-cal-event-task { background: #0ab39c; }
.crm-cal-legend-dot.crm-cal-event-followup { background: #f7b84b; }
.crm-cal-week-body { display: flex; flex-direction: column; }
.crm-cal-week-empty { margin: auto 0; text-align: center; opacity: 0.65; }
.crm-cal-today-col { border-color: rgba(132, 60, 11, 0.35); }
.crm-cal-today-col > .card-header { background: rgba(132, 60, 11, 0.08); }
.crm-cal-day, .crm-cal-week-body, .crm-cal-day-body { cursor: pointer; }
.crm-cal-day:hover { background: rgba(132, 60, 11, 0.04); }
.crm-cal-event-meeting-item { cursor: grab; user-select: none; }
.crm-cal-event-meeting-item:hover { filter: brightness(0.96); }
.crm-cal-event-dragging { opacity: 0.5; cursor: grabbing; }
.crm-cal-more { cursor: pointer; text-decoration: underline; }
.crm-cal-week-body { min-height: 110px; }
.crm-cal-drop-over { background: rgba(132, 60, 11, 0.1) !important; outline: 2px dashed rgba(132, 60, 11, 0.4); outline-offset: -3px; }
.crm-timeline-item { display: flex; gap: 1rem; margin-bottom: 1.25rem; position: relative; }
.crm-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: -12px; width: 2px; background: rgba(0, 0, 0, 0.08); }
.crm-timeline-marker { width: 36px; height: 36px; border-radius: 50%; background: rgba(132, 60, 11, 0.1); color: var(--wss-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-timeline-content { flex: 1; min-width: 0; }
.crm-wa-layout { display: flex; min-height: 520px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.5rem; overflow: hidden; }
.crm-wa-sidebar { width: 320px; border-right: 1px solid rgba(0, 0, 0, 0.08); background: #f8f9fa; overflow-y: auto; }
.crm-wa-chat-item { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); text-decoration: none; color: inherit; }
.crm-wa-chat-item:hover, .crm-wa-chat-item.active { background: rgba(132, 60, 11, 0.06); }
.crm-wa-main { flex: 1; display: flex; flex-direction: column; background: #e5ddd5; }
.crm-wa-messages { flex: 1; padding: 1rem; overflow-y: auto; }
.crm-wa-msg { margin-bottom: 0.75rem; display: flex; }
.crm-wa-msg-me { justify-content: flex-end; }
.crm-wa-bubble { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; }
.crm-wa-msg-them .crm-wa-bubble { background: #fff; }
.crm-wa-msg-me .crm-wa-bubble { background: #dcf8c6; }
.crm-ai-msg { margin-bottom: 0.75rem; display: flex; }
.crm-ai-msg-user { justify-content: flex-end; }
.crm-ai-bubble { max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 0.75rem; font-size: 0.875rem; }
.crm-ai-msg-assistant .crm-ai-bubble { background: rgba(32, 56, 100, 0.06); }
.crm-ai-msg-user .crm-ai-bubble { background: rgba(132, 60, 11, 0.12); color: #334155; }
.crm-ai-action-card { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.crm-ai-action-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

/* Lead notes chain — chat-style thread */
.wss-lead-notes-thread { min-height: 280px; max-height: 420px; overflow-y: auto; padding: 1rem; background: #f3f6f9; display: flex; flex-direction: column; }
.wss-lead-note-msg { display: flex; gap: 0.65rem; margin-bottom: 1rem; align-items: flex-end; max-width: 78%; box-sizing: border-box; }
.wss-lead-note-msg-in { align-self: flex-start; justify-content: flex-start; }
.wss-lead-note-msg-out { align-self: flex-end; justify-content: flex-end; flex-direction: row-reverse; margin-left: auto; }
.wss-lead-note-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #fff; flex-shrink: 0; background: #405189; }
.wss-lead-note-content { min-width: 0; flex: 1; }
.wss-lead-note-msg-out .wss-lead-note-content { display: flex; flex-direction: column; align-items: flex-end; }
.wss-lead-note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 0.35rem; font-size: 0.75rem; width: 100%; }
.wss-lead-note-msg-out .wss-lead-note-meta { justify-content: flex-end; }
.wss-lead-note-meta .fw-medium { font-size: 0.8125rem; color: #334155; }
.wss-lead-note-role-badge { font-size: 0.6875rem; font-weight: 500; padding: 0.2em 0.5em; }
.wss-lead-note-bubble { display: inline-block; max-width: 100%; padding: 0.55rem 0.75rem; font-size: 0.8125rem; line-height: 1.45; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); text-align: left; border-radius: 10px; }
.wss-lead-note-msg-in .wss-lead-note-bubble { border-radius: 10px; border-left: 3px solid #405189; }
.wss-lead-note-msg-out .wss-lead-note-bubble { border-radius: 10px; background: rgba(132, 60, 11, 0.1); border: 1px solid rgba(132, 60, 11, 0.15); border-right: 3px solid #843c0b; }
.wss-lead-note-sales-exec .wss-lead-note-avatar { background: #299cdb; }
.wss-lead-note-sales-exec .wss-lead-note-role-badge { background: rgba(41, 156, 219, 0.12); color: #1a6fa8; }
.wss-lead-note-sales-exec.wss-lead-note-msg-in .wss-lead-note-bubble { border-left-color: #299cdb; }
.wss-lead-note-sales-mgr .wss-lead-note-avatar { background: #843c0b; }
.wss-lead-note-sales-mgr .wss-lead-note-role-badge { background: rgba(132, 60, 11, 0.12); color: #843c0b; }
.wss-lead-note-sales-mgr.wss-lead-note-msg-in .wss-lead-note-bubble { border-left-color: #843c0b; }
.wss-lead-note-crm-admin .wss-lead-note-avatar { background: #0ab39c; }
.wss-lead-note-crm-admin .wss-lead-note-role-badge { background: rgba(10, 179, 156, 0.12); color: #0a8f7c; }
.wss-lead-note-crm-admin.wss-lead-note-msg-in .wss-lead-note-bubble { border-left-color: #0ab39c; }
.wss-lead-note-biz-dev .wss-lead-note-avatar { background: #f7b84b; color: #5c4a1f; }
.wss-lead-note-biz-dev .wss-lead-note-role-badge { background: rgba(247, 184, 75, 0.2); color: #9a7619; }
.wss-lead-note-biz-dev.wss-lead-note-msg-in .wss-lead-note-bubble { border-left-color: #f7b84b; }
.wss-lead-note-presales .wss-lead-note-avatar { background: #6559cc; }
.wss-lead-note-presales .wss-lead-note-role-badge { background: rgba(101, 89, 204, 0.12); color: #5248a8; }
.wss-lead-note-presales.wss-lead-note-msg-in .wss-lead-note-bubble { border-left-color: #6559cc; }
.wss-lead-note-you .wss-lead-note-avatar { background: #405189; }
.wss-lead-note-followup .wss-lead-note-bubble {
    background: rgba(10, 179, 156, 0.08);
    border-color: rgba(10, 179, 156, 0.2);
}
.wss-lead-note-followup.wss-lead-note-msg-in .wss-lead-note-bubble { border-left-color: #0ab39c; }
.wss-lead-note-followup.wss-lead-note-msg-out .wss-lead-note-bubble { border-right-color: #0ab39c; }
.wss-lead-note-fu-flag {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(10, 179, 156, 0.14);
    color: #0a8f7c;
    padding: 0.2em 0.5em;
}
.wss-lead-notes-compose { flex-shrink: 0; }
.wss-lead-notes-input-wrap { position: relative; }
.wss-lead-notes-input { min-height: 7.5rem; padding: 0.75rem 3.5rem 0.75rem 0.85rem; resize: none; font-size: 0.875rem; line-height: 1.45; border-radius: 0.5rem; }
.wss-lead-notes-send { position: absolute; right: 0.65rem; bottom: 0.65rem; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.wss-lead-notes-send i { font-size: 1.1rem; margin: 0; }

/* Mobile sidebar drawer — override compact sm styles that break overlay mode */
@media (max-width: 767.98px) {
    [data-layout=vertical] #page-topbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    [data-layout=vertical] .main-content {
        margin-left: 0 !important;
    }
    [data-layout=vertical] .footer {
        left: 0 !important;
    }
    .vertical-sidebar-enable [data-layout=vertical] #page-topbar {
        z-index: 1006 !important;
    }
    [data-layout=vertical] .app-menu.navbar-menu,
    [data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu,
    [data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu,
    [data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu {
        display: flex !important;
        flex-direction: column !important;
        width: var(--tb-vertical-menu-width) !important;
        max-width: min(var(--tb-vertical-menu-width), 88vw) !important;
        height: calc(100vh - var(--tb-header-height, 70px)) !important;
        max-height: calc(100vh - var(--tb-header-height, 70px)) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        top: var(--tb-header-height, 70px) !important;
        left: 0 !important;
        bottom: 0 !important;
    }
    [data-layout=vertical] .app-menu.navbar-menu .navbar-brand-box,
    [data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box,
    [data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu .navbar-brand-box,
    [data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu .navbar-brand-box {
        display: none !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
    }
    [data-layout=vertical] .app-menu.navbar-menu #scrollbar,
    [data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #scrollbar,
    [data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #scrollbar,
    [data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #scrollbar {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 0.5rem !important;
    }
    [data-layout=vertical] .app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel {
        position: static !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
        background: transparent !important;
    }
    [data-layout=vertical] .app-menu.navbar-menu #navbar-nav .menu-dropdown.wss-compact-flyout-panel .wss-compact-flyout-header {
        display: none !important;
    }
    [data-layout=vertical] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.show) {
        display: none !important;
    }
    [data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.wss-compact-flyout-panel),
    [data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.wss-compact-flyout-panel),
    [data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse:not(.wss-compact-flyout-panel) {
        display: none !important;
    }
    [data-layout=vertical][data-sidebar-size="sm"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse.show,
    [data-layout=vertical][data-sidebar-size="sm-hover"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse.show,
    [data-layout=vertical][data-sidebar-size="sm-hover-active"] .app-menu.navbar-menu #navbar-nav .menu-dropdown.collapse.show {
        display: block !important;
    }
    .page-content .email-wrapper.wss-email-inbox-3col.mx-n3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-content .email-wrapper.wss-email-inbox-3col.mt-n3 {
        margin-top: 0 !important;
    }
}

/* Responsive layout pass — layout-only, no visual redesign */
.card-header.d-flex { min-width: 0; }
.apex-charts { max-width: 100%; }
@media (max-width: 767.98px) {
    .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 575.98px) {
    .wss-header-right {
        gap: 0.15rem;
        max-width: calc(100% - 56px);
    }
    .wss-header-tools {
        gap: 0.2rem;
    }
    .wss-header-actions .topbar-user .btn {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

/* CRM company account profile */
.wss-co-hero {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 60%, rgba(55, 98, 234, 0.05) 100%);
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
.wss-co-avatar {
    flex-shrink: 0;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(145deg, #3762ea 0%, #1e3a8a 100%);
    box-shadow: 0 8px 20px rgba(55, 98, 234, 0.28);
}
.wss-co-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 16rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.78rem;
    text-decoration: none;
    overflow: hidden;
}
.wss-co-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wss-co-chip i { color: #3762ea; flex-shrink: 0; }
.wss-co-chip:hover { border-color: rgba(55, 98, 234, 0.35); color: #3762ea; }
.wss-co-chip.is-empty { pointer-events: none; opacity: 0.55; }
.wss-co-kpi {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wss-co-kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.wss-co-kpi-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.15rem;
}
.wss-co-kpi-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}
.wss-co-tab-count {
    display: inline-flex;
    min-width: 1.2rem;
    height: 1.2rem;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
}
.wss-doc-tabs .nav-link.active .wss-co-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.wss-co-page table.wss-doc-table {
    width: 100%;
    margin-bottom: 0;
}
.wss-co-page table.wss-doc-table thead th,
.wss-co-page table.wss-doc-table tbody td {
    vertical-align: middle;
    white-space: nowrap;
}
.wss-co-page #ccdActivityTable td,
.wss-co-page #cctActivityTable td,
.wss-co-page #codActivityTable td { white-space: normal; }
.wss-co-page .dataTables_wrapper .dataTables_length,
.wss-co-page .dataTables_wrapper .dataTables_filter,
.wss-co-page .dataTables_wrapper .dataTables_info,
.wss-co-page .dataTables_wrapper .dataTables_paginate {
    display: none !important;
}
.wss-co-note {
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 0.75rem;
    background: #fff;
}
.wss-co-note-form {
    padding: 1.15rem;
    border: 1px dashed rgba(15, 23, 42, 0.14);
    border-radius: 0.85rem;
    background: #f8fafc;
}
@media (max-width: 575.98px) {
    .wss-co-avatar { width: 3.4rem; height: 3.4rem; font-size: 0.95rem; }
    .wss-co-kpi { padding: 0.85rem; }
    .wss-co-kpi-value { font-size: 0.95rem; }
}