@font-face {
    font-family: 'Oswald-bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Oswald/Oswald-Bold.ttf') format('truetype');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Open-sans';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
    text-rendering: optimizeLegibility;
}


/**********************************/
/************ Layout **************/
/**********************************/

/* Full viewport: bỏ mảng trắng trên, dưới, bên phải */
html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    font-family: 'Lato', 'Open-sans', sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
}
#page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Container fluid full width (Bootstrap) */
#page .container-fluid,
.main-container .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* Tránh scroll ngang toàn trang (bớt cảm giác vướng) - không áp dụng Calendar */
body:not([data-module="Calendar"]) {
    overflow-x: hidden !important;
}
html:not(:has(body[data-module="Calendar"])) {
    overflow-x: hidden !important;
}

/* Calendar (Schedule): scroll/layout — calendar-google.css (tránh trùng rule gây 2 scrollbar) */

/* ========== Nav hiện đại, thiết kế đẹp ========== */
/* Ghi đè Bootstrap navbar-inverse: topbar sáng, không tối */
nav.app-fixed-navbar.navbar-inverse,
.app-fixed-navbar.navbar.navbar-inverse,
.navbar.app-fixed-navbar.navbar-inverse {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
.app-fixed-navbar {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 12px rgba(0,0,0,0.04);
    min-height: 64px;
}
.app-fixed-navbar .navbar-nav > li > a,
.app-fixed-navbar .navbar-nav > li > div > a,
.app-fixed-navbar .navbar-nav .dropdown-toggle {
    color: #333 !important;
}
.app-fixed-navbar .navbar-nav > li > a:hover,
.app-fixed-navbar .navbar-nav > li > div > a:hover,
.app-fixed-navbar .navbar-nav .dropdown-toggle:hover {
    color: #23527c !important;
    background-color: rgba(0,0,0,0.04) !important;
}
.global-nav {
    position: relative;
    padding-left: 0;
    padding-right: 0;
}
/* Toàn bộ topbar 1 hàng: hamburger, logo, search, icon – không xuống dòng */
.app-fixed-navbar .global-nav .global-nav-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.app-fixed-navbar .global-nav .global-nav-row > .global-nav-left,
.app-fixed-navbar .global-nav .global-nav-row > .navbar-header,
.app-fixed-navbar .global-nav .global-nav-row > .global-nav-center,
.app-fixed-navbar .global-nav .global-nav-row > .global-nav-right,
.app-fixed-navbar .global-nav .global-nav-row > #navbar {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
.app-fixed-navbar .global-nav .global-nav-row > .global-nav-center {
    flex: 1 1 auto !important;
    min-width: 80px;
}
/* Global keyword search removed — keep spacer collapsed */
.app-fixed-navbar .global-nav .global-nav-row > .global-nav-center.mk-dash-app-global-center--empty,
.app-fixed-navbar .global-nav .global-nav-row > .global-nav-center.mk-topbar-search-removed {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    visibility: hidden;
    pointer-events: none;
}
/* #navbar (Quick Create, Calendar, bell, user...) luôn hiện và ngang hàng */
.app-fixed-navbar .global-nav #navbar.collapse.navbar-collapse,
.app-fixed-navbar .global-nav #navbar.collapse.in {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
}
/* Hamburger + logo luôn 1 hàng */
.app-fixed-navbar .global-nav .global-nav-left .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.app-fixed-navbar .global-nav .global-nav-left #appnavigator,
.app-fixed-navbar .global-nav .global-nav-left .app-switcher-container {
    flex: 0 0 auto !important;
}
/* Space between hamburger and company logo (structure unchanged; spacing only) */
.app-fixed-navbar .global-nav .global-nav-left #appnavigator {
    margin-right: 12px !important;
}
.app-fixed-navbar .global-nav .global-nav-left .logo-container {
    flex: 0 1 auto !important;
    min-width: 0;
}
/* App-nav: thanh dưới topbar (icon app + module title + nút hành động) */
@keyframes appNavEnter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes appNavRowItem {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Hàng 2 của layout 2 hàng: icon + title + nút trên 1 dòng */
.app-nav {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 50px;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s ease, background 0.3s ease;
    animation: appNavEnter 0.4s ease-out;
}
.app-nav .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
}
.app-nav:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* Chuẩn 2 hàng: Hàng 1 = topbar, Hàng 2 = app-nav (icon + DASHBOARD + nút) – ép 1 dòng */
.app-nav .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.app-nav .row > .app-indicator-icon-container,
.app-nav .row > .col-sm-1 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
.app-nav .row > .module-action-bar,
.app-nav .row > .col-sm-11,
.app-nav .row > [class*="col-"]:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
.app-nav .module-action-bar .module-action-content {
    flex-wrap: nowrap !important;
}
.app-nav .module-action-bar .module-action-content .module-breadcrumb {
    flex-wrap: nowrap !important;
    min-width: 0;
}
/* Stagger hiệu ứng cho từng phần tử trong nav */
.app-nav .row > .app-indicator-icon-container {
    animation: appNavRowItem 0.35s ease-out 0.05s both;
}
.app-nav .row > .col-sm-11 .module-action-bar,
.app-nav .row > [class*="col-"]:last-child .module-action-bar {
    animation: appNavRowItem 0.35s ease-out 0.12s both;
}
.app-nav .row > .app-switcher-container {
    animation: appNavRowItem 0.35s ease-out 0.08s both;
}
.main-container {
    position: relative;
}
/* Từ 576px: topbar luôn 1 hàng – ghi đè Bootstrap grid tránh tách trên/dưới */
@media (min-width: 576px) {
    .app-fixed-navbar .global-nav .global-nav-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        min-height: 56px;
        padding: 0 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .app-fixed-navbar .global-nav .global-nav-row > .global-nav-left,
    .app-fixed-navbar .global-nav .global-nav-row > .navbar-header,
    .app-fixed-navbar .global-nav .global-nav-row > .global-nav-center,
    .app-fixed-navbar .global-nav .global-nav-row > .global-nav-right,
    .app-fixed-navbar .global-nav .global-nav-row > #navbar {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
    }
    .app-fixed-navbar .global-nav .global-nav-row > .global-nav-center {
        flex: 1 1 auto;
        min-width: 80px;
    }
    .app-fixed-navbar .global-nav #navbar.collapse.navbar-collapse {
        display: flex !important;
        visibility: visible;
        height: auto !important;
    }
    .app-fixed-navbar .global-nav .global-nav-left .row,
    .app-fixed-navbar .global-nav .global-nav-left .app-navigator-container .row,
    .app-fixed-navbar .global-nav .global-nav-left .logo-container .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .app-fixed-navbar .global-nav .global-nav-left .app-navigator-container [class*="col-"],
    .app-fixed-navbar .global-nav .global-nav-left .logo-container[class*="col-"] {
        width: auto !important;
        max-width: none !important;
    }
}
/* Từ 768px: giữ 1 hàng, thêm khoảng thoáng */
@media (min-width: 768px) {
    .app-fixed-navbar .global-nav #navbar.collapse.navbar-collapse {
        display: flex !important;
        visibility: visible;
        height: auto !important;
    }
    /* Tất cả topbar luôn 1 hàng: hamburger, logo, search, icon – không xuống dòng */
    .app-fixed-navbar .global-nav .global-nav-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 64px;
        padding: 0 16px;
        margin-left: 0;
        margin-right: 0;
    }
    .app-fixed-navbar .global-nav .global-nav-left,
    .app-fixed-navbar .global-nav .navbar-header,
    .app-fixed-navbar .global-nav .global-nav-right {
        flex-shrink: 0;
    }
    /* Logo + search ngang hàng, căn giữa theo chiều dọc */
    .app-fixed-navbar .global-nav .global-nav-left {
        order: 1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-width: 0;
    }
    .app-fixed-navbar .global-nav .global-nav-left .row,
    .app-fixed-navbar .global-nav .global-nav-left .app-navigator-container .row,
    .app-fixed-navbar .global-nav .global-nav-left .logo-container .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
        min-height: 44px;
    }
    .app-fixed-navbar .global-nav .global-nav-left .company-logo {
        max-height: 40px;
    }
    .app-fixed-navbar .global-nav .navbar-header {
        order: 2;
        flex: 0 0 auto;
    }
    .app-fixed-navbar .global-nav .global-nav-center {
        order: 3;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 480px;
    }
    .app-fixed-navbar .global-nav .global-nav-center .search-links-container {
        width: 100%;
    }
    .app-fixed-navbar .global-nav .search-link {
        height: 44px;
    }
    .app-fixed-navbar .global-nav .global-nav-right {
        order: 4;
        margin-left: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        margin-right: 0;
        padding-right: 0;
    }
}
@media (min-width: 992px) {
    .app-fixed-navbar .global-nav .global-nav-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 64px;
        padding: 0 28px;
        margin-left: 0;
        margin-right: 0;
    }
    .app-fixed-navbar .global-nav .global-nav-left {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-width: 0;
    }
    .app-fixed-navbar .global-nav .global-nav-left .app-navigator-container .row {
        margin: 0;
        padding: 0;
        min-height: 0;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .app-fixed-navbar .global-nav .global-nav-left .logo-container {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 120px;
        max-width: 180px;
        z-index: 2;
        border-bottom: none;
        padding-left: 0;
    }
    .app-fixed-navbar .global-nav .global-nav-center {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 480px;
        margin: 0 28px;
    }
    .app-fixed-navbar .global-nav .global-nav-center .search-links-container {
        width: 100%;
        max-width: 100%;
    }
    .app-fixed-navbar .global-nav .search-links-container {
        position: static !important;
        width: 100% !important;
        max-width: 100%;
        padding-left: 0 !important;
        float: none;
    }
    /* Ô chứa 6 icon: sát phải nav – bỏ padding/margin phải */
    .app-fixed-navbar .global-nav .global-nav-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        margin-left: auto;
        margin-right: 0;
        padding-right: 0;
    }
    /* #navbar: flex để đẩy ul (icon) sát phải */
    .app-fixed-navbar .global-nav #navbar {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        float: right !important;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        box-sizing: inherit;
        font-size: 12px;
        color: #333;
        margin-right: 0;
        padding-right: 0;
    }
    /* 6 icon (plus, calendar, chart, task, bell, user) luôn 1 hàng với hamburger + logo + search */
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav {
        margin-left: auto;
        margin-right: 0;
        padding-right: 0;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin: 0;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li {
        flex-shrink: 0;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li {
        margin: 0;
        float: none;
    }
    /* Khớp cấu trúc HTML: li > div.dropdown hoặc div > a / .dropdown-toggle */
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > .dropdown.pull-left {
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > .dropdown-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
        color: #5f6368;
        background: transparent;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a:hover,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > .dropdown-toggle:hover {
        background-color: rgba(0,0,0,0.05);
        color: #1a1a1a;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a:active,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > .dropdown-toggle:active {
        transform: scale(0.96);
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a .fa,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > .dropdown-toggle .fa {
        font-size: 19px;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a.qc-button {
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 12px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .app-fixed-navbar .global-nav #navbar .modern-notifications-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 11px;
        line-height: 18px;
        border-radius: 9px;
        background: #2563eb;
        color: #fff;
        border: 2px solid #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .app-fixed-navbar .global-nav #appnavigator {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        color: #202124;
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .app-fixed-navbar .global-nav #appnavigator:hover {
        background: rgba(0,0,0,0.08);
        color: #111827;
        border-color: rgba(0, 0, 0, 0.14);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .app-fixed-navbar .global-nav #appnavigator:active {
        transform: scale(0.96);
    }
    .app-fixed-navbar .global-nav #appnavigator .app-icon {
        font-size: 19px;
    }
    /* Skin (e.g. project) targets `.app-navigator .app-icon` for dark bar: white @ 0.8 opacity.
       On light topbar that reads as faint; force readable icon on fixed navbar only. */
    .app-fixed-navbar .global-nav #appnavigator .app-icon {
        color: #202124 !important;
        opacity: 1 !important;
    }
    .app-fixed-navbar .global-nav #appnavigator:hover .app-icon {
        color: #111827 !important;
        opacity: 1 !important;
    }

    /* Fix: remove unwanted dark block behind top-left hamburger.
       Some skins apply dark background on `.app-switcher-container .app-navigator`. */
    .app-fixed-navbar .global-nav #appnavigator .app-navigator {
        background: transparent !important;
        box-shadow: none !important;
    }
    .app-fixed-navbar .global-nav #appnavigator .app-navigator::before,
    .app-fixed-navbar .global-nav #appnavigator .app-navigator::after {
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
    /* Khớp cấu trúc #navbar: li > div(.dropdown) > a / .dropdown-toggle; vùng bấm 44x44, icon nhỏ gọn 18px */
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > .dropdown-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Icon trong #navbar: font 18px (nhỏ gọn); link giữ 44x44, span/i bên trong box 18x18 */
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav .fa,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav .vicon,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav [class^="vicon-"],
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav [class*=" vicon-"] {
        font-size: 18px !important;
        line-height: 18px !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: content-box !important;
    }
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > a .fa,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav > li > div > .dropdown-toggle .fa,
    .app-fixed-navbar .global-nav #navbar .nav.navbar-nav .dropdown-toggle .vicon {
        width: 18px !important;
        height: 18px !important;
    }
    .global-nav .search-links-container {
        position: static;
        width: 100%;
        padding-left: 0;
        float: none;
    }
    .module-action-bar{
        width: 100%;
        float:left;
    }
    .app-nav .module-action-bar .module-action-content{
        border-bottom: 1px solid rgba(0,0,0,0.08);
        background: linear-gradient(180deg, #fbfbfb 0%, #fff 100%);
        transition: background 0.25s ease, box-shadow 0.2s ease;
    }
    .app-nav .module-action-bar .module-action-content .navbar-right{
        margin-right: 10px;
    }
    .main-container .module-nav{
        display: inline-block;
        width: 180px;
        z-index: 2;
        height:2px;
        position: absolute;
    }
    .main-container .content-area{
        width: 100%;
        float:left;
    }
}

/**********************************/
/******** Navigation styles *******/
/**********************************/

.company-logo {
    height: 42px;
    max-height: 42px;
    width: auto;
    max-width: 150px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    transition: opacity 0.2s ease;
}
.company-logo:hover {
    opacity: 0.88;
}
.company-logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.navbar .glyphicon{
    font-size: 18px;
}
.global-nav .logo-container{
    border-bottom: none;
}
.global-nav .search-links-container{
    border-bottom: none;
}
.global-nav .navbar-nav>li>a{
    padding-top: 0;
    padding-bottom: 0;
}
.global-nav>ul{
    margin-right: 0;
}
.global-nav .search-links-container{
    padding-right: 0;
    padding-left: 0;
}
.link-text-xs-only{
    padding: 0 15px;
    display: inline-block;
    vertical-align: top;
}

/* Ô tìm kiếm nav: thiết kế đẹp, mềm mại */
.search-link {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    background: rgba(0,0,0,0.04);
    border: 1px solid transparent;
    border-radius: 12px;
    color: #6b7280;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.search-link:hover {
    background: rgba(0,0,0,0.06);
    color: #374151;
}
.search-link:focus-within {
    background: #fff;
    border-color: rgba(59, 130, 246, 0.35);
    color: #374151;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-link .fa-search {
    font-size: 15px;
    margin-right: 12px;
    flex-shrink: 0;
    opacity: 0.85;
}
.search-link .keyword-input {
    border: 0;
    background: transparent;
    height: 40px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #111827;
}
.search-link .keyword-input::placeholder {
    color: #9ca3af;
}
.search-link .keyword-input:focus {
    outline: none;
}
.search-link #adv-search {
    margin-left: 8px;
    font-size: 12px;
    opacity: 0.7;
}
@media (max-width: 768px) { 
    .module-action-bar .navbar-right{
        float: right;
    }
    .module-action-bar .navbar-right .nav>li{
        display: inline-block;
    }
    .module-action-bar .navbar-right .nav>li a{
        padding: 0 10px;
    }
    .global-nav .logo-container{
        border-bottom: 0;
    }
}
@media (max-width: 991px) {
    .global-nav .logo-container{
        border-bottom: 0;
    }


} 
@media (min-width: 991px) {
    .nav>li>a.qc-button{
        padding: 2px 3px;
        margin-top: 13px;
        margin-right: 15px;
        background: #3cb878;
        color: #fff;
        border-radius: 20px;
    }
    .nav>li>a.qc-button span{
        vertical-align: top;
    }
}
@media (max-width: 1200px) {
    .app-menu{
        max-height: 100%;
        overflow-y: auto;
    }
}
/** App Nav Styles – hiệu ứng và giao diện */

.active-app-title{
    white-space: nowrap;
    font-family: Oswald-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Icon app (Dashboard, Schedule, …) bên trái nav */
.app-nav .app-indicator-icon-container {
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.25s ease, border-radius 0.25s ease;
    border-radius: 10px;
    padding: 4px 8px;
}
.app-nav .app-indicator-icon-container:hover {
    transform: scale(1.05);
    opacity: 0.95;
    background: rgba(0,0,0,0.04);
}
.app-nav .app-indicator-icon {
    transition: transform 0.25s ease;
}
.app-nav .app-indicator-icon-container:hover .app-indicator-icon {
    transform: rotate(-5deg);
}
.app-nav .app-indicator-icon-container .row {
    transition: background 0.2s ease, border-radius 0.2s ease;
}

.app-nav .app-switcher-container{
    display: inline-block;
    width: 300px;
    z-index: 2;
    height: 42px;
}
.app-nav .app-switcher-container .app-navigator,
.app-nav .app-switcher-container .app-icon {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.app-nav .app-switcher-container:hover .app-navigator,
.app-nav .app-switcher-container:hover .app-icon {
    transform: scale(1.02);
}

/* Module action bar (title + breadcrumb + nút) */
.app-nav .module-action-bar {
    transition: border-color 0.25s ease, background 0.2s ease;
}
.module-action-bar .module-title{
    font-family: Oswald-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #596875;
    margin: 8px 15px;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.module-action-bar .module-title a,
.module-action-bar .module-breadcrumb a {
    transition: color 0.2s ease, opacity 0.2s ease;
}
.module-action-bar .module-title a:hover,
.module-action-bar .module-breadcrumb a:hover {
    color: #1a73e8;
    opacity: 0.9;
}
.app-nav .module-action-bar .module-action-content{
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.app-nav .module-action-bar .module-action-content .module-breadcrumb{
    flex: 0 0 auto;
}
.app-nav .module-action-bar .module-action-content .navbar-right,
.app-nav .module-action-bar .module-action-content > .pull-right,
.app-nav .module-action-bar .module-action-content > [class*="col-lg-5"],
.app-nav .module-action-bar .module-action-content > [class*="col-md-6"].pull-right{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
}
.app-nav .module-action-bar .module-action-content .navbar-right .nav{
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}
.app-nav .module-action-bar .module-action-content:hover {
    background: #fafbfc;
}
/* Gạch dưới nhẹ khi hover toàn bộ nav (tùy chọn) */
.app-nav .module-action-bar {
    position: relative;
}
.app-nav .module-action-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(26, 115, 232, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.app-nav:hover .module-action-bar::after {
    opacity: 1;
}
.app-nav .btn-default.module-buttons,
.app-nav .addButton {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 8px;
}
.app-nav .btn-default.module-buttons:hover,
.app-nav .addButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.app-nav .btn-default.module-buttons:active,
.app-nav .addButton:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.app-nav .module-action-bar .navbar-right .glyphicon{
    transition: transform 0.2s ease, color 0.2s ease;
}
.app-nav .module-action-bar .navbar-right .nav > li:hover .glyphicon{
    transform: scale(1.08);
}
/* Link và nút trong nav bar – hover mượt */
.app-nav .module-action-bar .navbar-right .nav > li > a {
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    border-radius: 6px;
    padding: 6px 10px;
}
.app-nav .module-action-bar .navbar-right .nav > li > a:hover {
    background: rgba(0,0,0,0.05);
    opacity: 0.95;
}
.app-nav .module-action-bar .navbar-right .nav > li > a:active {
    background: rgba(0,0,0,0.08);
}

/* Đồng bộ kích thước icon trên app-nav (thanh dưới topbar): 24px */
.app-nav .module-action-bar .fa,
.app-nav .module-action-bar .glyphicon,
.app-nav .module-action-bar .vicon,
.app-nav .module-action-bar [class*="vicon-"],
.app-nav .addButton .fa,
.app-nav .addButton .glyphicon,
.app-nav .btn-default.module-buttons .fa,
.app-nav .btn-default.module-buttons .glyphicon {
    font-size: 24px !important;
    line-height: 24px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 24px !important;
    height: 24px !important;
    box-sizing: content-box !important;
}

/* Calendar: ADD EVENT, ADD TASK, CUSTOMIZE – kích thước chữ & icon cân đối, đẹp hơn */
body[data-module="Calendar"] .app-nav .btn-default.module-buttons,
body[data-module="Calendar"] .app-nav .addButton.module-buttons,
body:has(.CalendarViewPageDiv) .app-nav .btn-default.module-buttons,
body:has(.CalendarViewPageDiv) .app-nav .addButton.module-buttons {
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
}
body[data-module="Calendar"] .app-nav .btn-default.module-buttons .fa,
body[data-module="Calendar"] .app-nav .addButton.module-buttons .fa,
body[data-module="Calendar"] .app-nav .btn-default.module-buttons .fa-wrench,
body:has(.CalendarViewPageDiv) .app-nav .btn-default.module-buttons .fa,
body:has(.CalendarViewPageDiv) .app-nav .addButton.module-buttons .fa,
body:has(.CalendarViewPageDiv) .app-nav .btn-default.module-buttons .fa-wrench {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body[data-module="Calendar"] .app-nav .btn-default.module-buttons .caret,
body:has(.CalendarViewPageDiv) .app-nav .btn-default.module-buttons .caret {
    margin-left: 4px !important;
    font-size: 11px !important;
}

/* Calendar: khoảng cách trên và dưới thanh nút (Add Event, Add Task, Customize) bằng nhau */
body[data-module="Calendar"] .app-nav .module-action-bar,
body[data-module="Calendar"] .app-nav .module-action-bar,
body:has(.CalendarViewPageDiv) .app-nav .module-action-bar,
body[data-module="Calendar"] .app-nav .module-action-content,
body:has(.CalendarViewPageDiv) .app-nav .module-action-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Calendar: icon lịch, chữ MY CALENDAR và 3 nút cùng một hàng ngang (căn giữa dọc) */
body[data-module="Calendar"] .app-nav .row,
body:has(.CalendarViewPageDiv) .app-nav .row {
    align-items: center !important;
}
body[data-module="Calendar"] .app-nav .app-indicator-icon-container,
body:has(.CalendarViewPageDiv) .app-nav .app-indicator-icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body[data-module="Calendar"] .app-nav .app-indicator-icon-container .row,
body:has(.CalendarViewPageDiv) .app-nav .app-indicator-icon-container .row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}
body[data-module="Calendar"] .app-nav .module-action-bar,
body:has(.CalendarViewPageDiv) .app-nav .module-action-bar {
    display: flex !important;
    align-items: center !important;
}
body[data-module="Calendar"] .app-nav .module-action-content,
body:has(.CalendarViewPageDiv) .app-nav .module-action-content {
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body[data-module="Calendar"] .app-nav .module-action-content > .col-lg-5,
body[data-module="Calendar"] .app-nav .module-action-content > .col-md-5,
body:has(.CalendarViewPageDiv) .app-nav .module-action-content > .col-lg-5,
body:has(.CalendarViewPageDiv) .app-nav .module-action-content > .col-md-5 {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body[data-module="Calendar"] .app-nav .module-title,
body:has(.CalendarViewPageDiv) .app-nav .module-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
body[data-module="Calendar"] .app-nav .module-action-content .navbar-right,
body:has(.CalendarViewPageDiv) .app-nav .module-action-content .navbar-right {
    align-items: center !important;
}
body[data-module="Calendar"] .container-fluid.app-nav,
body:has(.CalendarViewPageDiv) .container-fluid.app-nav {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Calendar: kéo thanh toolbar (date, Today, nút) lên cho giữa hàng với Month/Week/Day/Agenda */
body[data-module="Calendar"] .calendar-fc-toolbar-wrap,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar .fc-left,
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar .fc-center,
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar .fc-right,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar .fc-left,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar .fc-center,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar .fc-right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar .fc-right,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar .fc-right {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: center !important;
}
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar .fc-right > *,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar .fc-right > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar h2,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
body[data-module="Calendar"] .calendar-fc-toolbar-wrap .fc-toolbar .fc-button-group,
body:has(.CalendarViewPageDiv) .calendar-fc-toolbar-wrap .fc-toolbar .fc-button-group {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.app-CONTACT{
    background: #3498db !important;
}

.app-MARKETING_AND_SALES{
    background: #f1c40f !important;
}

.app-SUPPORT {
    background: #8e44ad !important;
}

.app-INVENTORY{
    background: #d35400 !important;
}

.app-TOOLS {
    background: #2ecc71 !important;
}

/* App MANAGEMENT */
.app-MANAGEMENT{
    background: #1a73e8 !important;
}

.module-nav .mod-switcher-container{
    display: inline-block;
    width: 56px !important;
    max-width: 56px;
    z-index: 2;
    background: #2c3e50;
}

.module-action-bar{
    height: 42px;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd
}

.app-switcher-container .navbar-toggle{
    margin: 5px 0;
    padding: 5px;
}
.app-switcher-container .navbar-toggle .icon-bar{
    background: #fff;
}
.app-nav .module-action-bar .navbar-right .glyphicon{
    font-size: 14px;
    vertical-align: middle;
}
/* Menu hamburger: giao diện và vị trí giống nhau trên mọi trang (Dashboard, Teams, Mail Manager, ...) */
.app-menu,
#page .app-menu {
    width: 280px !important;
    max-width: 300px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 90px) !important;
    padding: 12px 0 12px 0 !important;
    padding-bottom: 12px !important;
    color: #fff !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    border: 0 !important;
    box-shadow: 6px 12px 28px rgba(0,0,0,0.3) !important;
    background: linear-gradient(180deg, #2d3e50 0%, #1a252f 100%) !important;
    overflow-y: auto !important;
    z-index: 10001 !important;
    border-radius: 0 10px 10px 0 !important;
    border-left: 4px solid #3498db !important;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.app-menu:hover,
#page .app-menu:hover {
    box-shadow: 8px 16px 32px rgba(0,0,0,0.35);
}
.app-menu hr{
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(52,152,219,0.4), transparent);
    margin: 8px 12px;
}
.app-menu .container-fluid,
.app-menu .app-list {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.app-menu .app-list-divider {
    margin-bottom: 4px !important;
}

/* Remove duplicate hamburger inside opened overlay menu (keep header hamburger only) */
.app-menu #menu-toggle-action {
    display: none !important;
}
/* Remove the empty top row that only contains the duplicate toggle */
.app-menu > .container-fluid > .row:first-child {
    display: none !important;
}

/* App overlay sidebar: shared card shell; per-app identity = left accent only (see .app-item-color-* below) */
.app-menu .menu-item.app-item,
#app-menu.app-menu .menu-item.app-item {
    display: block !important;
    padding: 10px 12px !important;
    margin: 0 10px 6px 10px !important;
    border-radius: 10px !important;
    text-align: left;
    cursor: pointer;
    font-size: 1.05em;
    color: #ecf0f1 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 3px solid transparent !important;
    box-shadow: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.app-menu a.menu-item.app-item,
#app-menu.app-menu a.menu-item.app-item {
    text-decoration: none !important;
}
.app-menu .menu-item.app-item:hover,
#app-menu.app-menu .menu-item.app-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    transform: none !important;
}
.app-menu .menu-item.app-item .menu-items-wrapper,
.app-menu .menu-item.app-item .app-menu-items-wrapper,
#app-menu.app-menu .menu-item.app-item .menu-items-wrapper,
#app-menu.app-menu .menu-item.app-item .app-menu-items-wrapper {
    transition: none !important;
}
.app-menu .menu-item.app-item:hover .menu-items-wrapper,
.app-menu .menu-item.app-item:hover .app-menu-items-wrapper {
    transform: none !important;
}
.app-menu .menu-item.app-item .fa,
.app-menu .menu-item.app-item .app-icon-list,
#app-menu.app-menu .menu-item.app-item .fa,
#app-menu.app-menu .menu-item.app-item .app-icon-list {
    font-size: 1.25em;
    margin-right: 10px;
    transition: opacity 0.2s ease, color 0.2s ease !important;
}
.app-menu .menu-item.app-item:hover .fa,
.app-menu .menu-item.app-item:hover .app-icon-list,
#app-menu.app-menu .menu-item.app-item:hover .fa,
#app-menu.app-menu .menu-item.app-item:hover .app-icon-list {
    transform: none !important;
}

/* App overlay menu: căn icon + chữ thẳng hàng, to đều giữa các app (MARKETING, SALES, MANAGEMENT, …) */
.app-menu .menu-item.app-item .app-menu-items-wrapper,
.app-menu .menu-item.app-item .menu-items-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* Use flex gap, not FA margins (fix Dashboard/icon misalignment) */
.app-menu .menu-item.app-item .app-menu-items-wrapper .fa,
.app-menu .menu-item.app-item .menu-items-wrapper .fa,
#app-menu.app-menu .menu-item.app-item .app-menu-items-wrapper .fa,
#app-menu.app-menu .menu-item.app-item .menu-items-wrapper .fa {
    margin-right: 0 !important;
}
.app-menu .menu-item.app-item .app-icon-list{
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
}
.app-menu .menu-item.app-item .app-name{
    flex: 1 1 auto;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.app-menu .menu-item.app-item .fa-chevron-right{
    flex: 0 0 auto;
    margin-left: 6px;
    opacity: 0.85;
    text-shadow: none !important;
    color: rgba(255,255,255,0.95) !important;
}
/* Xóa vết đen trên icon dropdown (theme có text-shadow: 0 0 1px #000) và ẩn caret Bootstrap */
.app-menu .menu-item.app-item.dropdown-toggle::after{
    display: none !important;
}
.app-menu .app-modules-dropdown li a{
    text-shadow: none !important;
}

/* App menu: giữ kiểu mặc định, không ép hiển thị (tránh trùng menu ngang) */
#app-menu.app-menu {
    position: fixed !important;
    top: 134px !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 300px !important;
    height: auto !important;
    max-height: calc(100vh - 150px) !important;
    padding: 12px 0 !important;
    z-index: 99999 !important;
    display: block !important;
    visibility: visible !important;
    background: linear-gradient(180deg, #1c2333 0%, #0f1627 100%) !important;
    box-shadow: 6px 12px 28px rgba(0,0,0,0.35) !important;
    border-radius: 0 12px 12px 0 !important;
    overflow-y: auto !important;
}
#app-menu.app-menu.hide {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* Đặt submenu lệch phải 280px để sát mép menu chính */
.app-menu .app-modules-dropdown {
    left: 280px !important;
}

/* Giữ thanh nav chính cố định và hiển thị trên các trang SUPPORT */
body[data-app="SUPPORT"] .container-fluid.app-nav,
body[data-module="HelpDesk"] .container-fluid.app-nav,
body[data-module="Rules"] .container-fluid.app-nav,
body[data-module="Activities"] .container-fluid.app-nav {
    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99998 !important;
    background: linear-gradient(90deg, rgba(26,188,156,0.92), rgba(99,102,241,0.9)) !important;
    box-shadow: 0 10px 30px rgba(15,23,42,0.25) !important;
}
#app-menu.app-menu .menu-item.app-item .app-menu-items-wrapper,
#app-menu.app-menu .menu-item.app-item .menu-items-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#app-menu.app-menu .menu-item.app-item .app-icon-list {
    flex: 0 0 auto !important;
    width: 24px !important;
    text-align: center !important;
}
#app-menu.app-menu .menu-item.app-item .app-name {
    flex: 1 1 auto !important;
    display: inline-block !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}
#app-menu.app-menu .menu-item.app-item .fa-chevron-right {
    flex: 0 0 auto !important;
    margin-left: 6px !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
    color: rgba(255,255,255,0.95) !important;
}
#app-menu.app-menu .menu-item.app-item.dropdown-toggle::after {
    display: none !important;
}
#app-menu.app-menu .app-modules-dropdown li a {
    text-shadow: none !important;
}
/* Fallback: .app-list.row (khi menu load qua fragment/PJAX thiếu #app-menu) */
.app-list.row .menu-item.app-item .app-menu-items-wrapper,
.app-list.row .menu-item.app-item .menu-items-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.app-list.row .menu-item.app-item .app-icon-list {
    flex: 0 0 auto !important;
    width: 24px !important;
    text-align: center !important;
}
.app-list.row .menu-item.app-item .app-name {
    flex: 1 1 auto !important;
    display: inline-block !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}
.app-list.row .menu-item.app-item .fa-chevron-right {
    flex: 0 0 auto !important;
    margin-left: 6px !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
    color: rgba(255,255,255,0.95) !important;
}
.app-list.row .menu-item.app-item.dropdown-toggle::after {
    display: none !important;
}
.app-menu .app-modules-dropdown li a {
    text-shadow: none !important;
}

/* Per-app subtle accent: left edge + soft tint (same card metrics; hover lift stays unified). */
.app-menu .app-item-color-MARKETING,
#app-menu.app-menu .app-item-color-MARKETING {
    border-left-color: rgba(52, 152, 219, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(52, 152, 219, 0.22) !important;
}
.app-menu .app-item-color-MARKETING:hover,
#app-menu.app-menu .app-item-color-MARKETING:hover {
    border-left-color: rgba(52, 152, 219, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(52, 152, 219, 0.28) !important;
}

.app-menu .app-item-color-SALES,
#app-menu.app-menu .app-item-color-SALES {
    border-left-color: rgba(231, 76, 60, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(231, 76, 60, 0.22) !important;
}
.app-menu .app-item-color-SALES:hover,
#app-menu.app-menu .app-item-color-SALES:hover {
    border-left-color: rgba(231, 76, 60, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(231, 76, 60, 0.28) !important;
}

.app-menu .app-item-color-INVENTORY,
#app-menu.app-menu .app-item-color-INVENTORY {
    border-left-color: rgba(230, 126, 34, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(230, 126, 34, 0.22) !important;
}
.app-menu .app-item-color-INVENTORY:hover,
#app-menu.app-menu .app-item-color-INVENTORY:hover {
    border-left-color: rgba(230, 126, 34, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(230, 126, 34, 0.28) !important;
}

.app-menu .app-item-color-SUPPORT,
#app-menu.app-menu .app-item-color-SUPPORT {
    border-left-color: rgba(26, 188, 156, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(26, 188, 156, 0.22) !important;
}
.app-menu .app-item-color-SUPPORT:hover,
#app-menu.app-menu .app-item-color-SUPPORT:hover {
    border-left-color: rgba(26, 188, 156, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(26, 188, 156, 0.28) !important;
}

.app-menu .app-item-color-MANAGEMENT,
#app-menu.app-menu .app-item-color-MANAGEMENT {
    border-left-color: rgba(46, 204, 113, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(46, 204, 113, 0.22) !important;
}
.app-menu .app-item-color-MANAGEMENT:hover,
#app-menu.app-menu .app-item-color-MANAGEMENT:hover {
    border-left-color: rgba(46, 204, 113, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(46, 204, 113, 0.28) !important;
}

.app-menu .app-item-color-TOOLS,
#app-menu.app-menu .app-item-color-TOOLS {
    border-left-color: rgba(39, 174, 96, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(39, 174, 96, 0.22) !important;
}
.app-menu .app-item-color-TOOLS:hover,
#app-menu.app-menu .app-item-color-TOOLS:hover {
    border-left-color: rgba(39, 174, 96, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(39, 174, 96, 0.28) !important;
}

.app-menu .app-item-color-PROJECT,
#app-menu.app-menu .app-item-color-PROJECT {
    border-left-color: rgba(155, 89, 182, 0.5) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(155, 89, 182, 0.2) !important;
}
.app-menu .app-item-color-PROJECT:hover,
#app-menu.app-menu .app-item-color-PROJECT:hover {
    border-left-color: rgba(155, 89, 182, 0.72) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(155, 89, 182, 0.26) !important;
}

.app-menu .app-item-misc,
#app-menu.app-menu .app-item-misc {
    border-left-color: rgba(149, 165, 166, 0.5) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(149, 165, 166, 0.18) !important;
}
.app-menu .app-item-misc:hover,
#app-menu.app-menu .app-item-misc:hover {
    border-left-color: rgba(149, 165, 166, 0.68) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(149, 165, 166, 0.22) !important;
}

/* Dashboard row (explicit class) */
.app-menu .app-item-dashboard,
#app-menu.app-menu .app-item-dashboard {
    border-left-color: rgba(52, 152, 219, 0.55) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 rgba(52, 152, 219, 0.22) !important;
}
.app-menu .app-item-dashboard:hover,
#app-menu.app-menu .app-item-dashboard:hover {
    border-left-color: rgba(52, 152, 219, 0.78) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(52, 152, 219, 0.28) !important;
}
.app-menu .app-item-dashboard-chevron,
#app-menu.app-menu .app-item-dashboard-chevron {
    opacity: 0;
}
.app-menu .app-item-dashboard .app-name,
#app-menu.app-menu .app-item-dashboard .app-name {
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Active app highlighting by current app context (prevents Dashboard looking "active") */
body[data-app="MARKETING"] #app-menu .app-item-color-MARKETING,
body[data-app="SALES"] #app-menu .app-item-color-SALES,
body[data-app="INVENTORY"] #app-menu .app-item-color-INVENTORY,
body[data-app="SUPPORT"] #app-menu .app-item-color-SUPPORT,
body[data-app="MANAGEMENT"] #app-menu .app-item-color-MANAGEMENT,
body[data-app="TOOLS"] #app-menu .app-item-color-TOOLS,
body[data-app="PROJECT"] #app-menu .app-item-color-PROJECT {
    background: rgba(255, 255, 255, 0.10) !important;
    border-left-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.35) !important;
}

/* Subtle icon tint per app (keeps hover/background unified) */
.app-menu .app-item-color-MARKETING .app-icon-list i { color: rgba(52, 152, 219, 0.95) !important; }
.app-menu .app-item-color-SALES .app-icon-list i { color: rgba(231, 76, 60, 0.95) !important; }
.app-menu .app-item-color-INVENTORY .app-icon-list i { color: rgba(230, 126, 34, 0.95) !important; }
.app-menu .app-item-color-SUPPORT .app-icon-list i { color: rgba(26, 188, 156, 0.95) !important; }
.app-menu .app-item-color-MANAGEMENT .app-icon-list i { color: rgba(46, 204, 113, 0.95) !important; }
.app-menu .app-item-color-TOOLS .app-icon-list i { color: rgba(39, 174, 96, 0.95) !important; }
.app-menu .app-item-color-PROJECT .app-icon-list i { color: rgba(155, 89, 182, 0.95) !important; }
.app-menu .app-item-misc .app-icon-list i { color: rgba(149, 165, 166, 0.9) !important; }

/* Menu con: cho phép hiện khi hover/click; ẩn khi menu ở trạng thái .hide */
.app-menu .app-modules-dropdown-container {
    position: relative !important;
}
.app-menu .app-modules-dropdown {
    pointer-events: auto !important;
    min-width: 260px !important;
    width: 260px !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 8px 0 !important;
    list-style: none;
    background: radial-gradient(circle at top left, #1f2937 0%, #020617 50%, #020617 100%) !important;
    border-radius: 0 14px 14px 0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85);
    position: absolute !important;
    left: 260px !important;
    top: 0 !important;
    display: none;
    visibility: hidden;
    opacity: 0;
}
.app-menu .app-modules-dropdown-container:hover > .app-modules-dropdown {
    /* Không mở bằng hover */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.app-menu .app-modules-dropdown-container.open > .app-modules-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10002 !important;
}

/* Submenu accent system: keep dark panel, add subtle parent-app identity */
.app-menu .app-modules-dropdown {
    border-left: 3px solid rgba(148, 163, 184, 0.22);
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.85),
        inset 3px 0 0 rgba(148, 163, 184, 0.10);
}

/* Map parent app color -> submenu panel + submenu hover tint */
.app-menu .app-modules-dropdown-container.open > .app-item-color-MARKETING + .app-modules-dropdown {
    border-left-color: rgba(52, 152, 219, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(52, 152, 219, 0.18) !important;
}
.app-menu .app-modules-dropdown-container.open > .app-item-color-SALES + .app-modules-dropdown {
    border-left-color: rgba(231, 76, 60, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(231, 76, 60, 0.18) !important;
}
.app-menu .app-modules-dropdown-container.open > .app-item-color-INVENTORY + .app-modules-dropdown {
    border-left-color: rgba(230, 126, 34, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(230, 126, 34, 0.18) !important;
}
.app-menu .app-modules-dropdown-container.open > .app-item-color-SUPPORT + .app-modules-dropdown {
    border-left-color: rgba(26, 188, 156, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(26, 188, 156, 0.18) !important;
}
.app-menu .app-modules-dropdown-container.open > .app-item-color-MANAGEMENT + .app-modules-dropdown {
    border-left-color: rgba(46, 204, 113, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(46, 204, 113, 0.18) !important;
}
.app-menu .app-modules-dropdown-container.open > .app-item-color-TOOLS + .app-modules-dropdown {
    border-left-color: rgba(39, 174, 96, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(39, 174, 96, 0.18) !important;
}
.app-menu .app-modules-dropdown-container.open > .app-item-color-PROJECT + .app-modules-dropdown {
    border-left-color: rgba(155, 89, 182, 0.5) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85), inset 3px 0 0 rgba(155, 89, 182, 0.16) !important;
}

/* Submenu items: unified hover, but tinted by parent app */
.app-menu .app-modules-dropdown-container.open > .app-item-color-MARKETING + .app-modules-dropdown li a:hover { background: rgba(52,152,219,0.14) !important; }
.app-menu .app-modules-dropdown-container.open > .app-item-color-SALES + .app-modules-dropdown li a:hover { background: rgba(231,76,60,0.14) !important; }
.app-menu .app-modules-dropdown-container.open > .app-item-color-INVENTORY + .app-modules-dropdown li a:hover { background: rgba(230,126,34,0.14) !important; }
.app-menu .app-modules-dropdown-container.open > .app-item-color-SUPPORT + .app-modules-dropdown li a:hover { background: rgba(26,188,156,0.14) !important; }
.app-menu .app-modules-dropdown-container.open > .app-item-color-MANAGEMENT + .app-modules-dropdown li a:hover { background: rgba(46,204,113,0.14) !important; }
.app-menu .app-modules-dropdown-container.open > .app-item-color-TOOLS + .app-modules-dropdown li a:hover { background: rgba(39,174,96,0.14) !important; }
.app-menu .app-modules-dropdown-container.open > .app-item-color-PROJECT + .app-modules-dropdown li a:hover { background: rgba(155,89,182,0.14) !important; }
.app-menu.hide .app-modules-dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.app-menu .mCustomScrollBox,
.app-menu .mCSB_container {
    max-height: none !important;
    overflow: visible !important;
}
.app-menu .app-modules-dropdown li {
    display: block !important;
}
.app-menu .app-modules-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    font-size: 1em !important;
    color: #fff !important;
}
/* Icon Main Page và Te Teams: lớn hơn một chút */
.app-menu .app-modules-dropdown .module-icon-lg {
    font-size: 1.2em !important;
    margin-right: 2px;
}
.app-menu .app-modules-dropdown .module-icon {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
}
/* Font Awesome sidebar icons: consistent box + alignment (SidebarAppMenu.mk-icon) */
.app-menu .mk-icon.app-icon-list,
.app-menu .app-icon-list.mk-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.app-menu .mk-icon i.fa {
    font-size: 1.05em;
    line-height: 1;
}
.app-menu .app-modules-dropdown .mk-icon.module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    vertical-align: middle;
}
.app-menu .app-modules-dropdown .mk-icon.module-icon i.fa {
    font-size: 1.15em;
    line-height: 1;
}
/* Hover menu con: chỉ tô đậm (nền tối hơn), không dùng nền trắng để chữ vẫn đọc được */
.app-menu .app-modules-dropdown li:hover,
.app-menu .app-modules-dropdown li a:hover {
    background: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
}
.app-menu {
    overflow-x: visible !important;
}

/* Fallback: bảo đảm submenu luôn lòi ra (kể cả khi có CSS khác che) */
#app-menu.app-menu {
    overflow: visible !important;
}
#app-menu.app-menu .app-modules-dropdown {
    z-index: 100000 !important;
}
#app-menu.app-menu .app-modules-dropdown-container:hover > .app-modules-dropdown {
    /* Không mở bằng hover – tránh giữ 2 menu chồng nhau */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#app-menu.app-menu .app-modules-dropdown-container.open > .app-modules-dropdown {
    /* Chỉ mở khi click (Bootstrap thêm class .open) */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Khi menu đang mở (không .hide) luôn nổi trên cùng */
#app-menu.app-menu:not(.hide),
.app-menu:not(.hide) {
    z-index: 99999 !important;
}

.menu-toggle{
    width: 20px;
    padding-top: 9px;
    margin:0 15px 0 0;
    float: left;
}
.menu-toggle:focus{
    outline: none;
}
.menu-toggle .icon-bar{
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    margin: 3px 0;
}
.app-trigger{
    padding-top: 8px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
    width: 85%;
}
.app-trigger .active-app-title{
    overflow: hidden;
    display: inline-block;
    width: 85%;
    text-overflow: ellipsis;
}

.app-trigger .arrow-down{
    display: none !important;
}
#sidebar-wrapper, #content-wrapper{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow-y: auto;
}

/* Sidebar: chỉ icon, không màu mè - rộng vừa icon (56px) */
#sidebar{
    width: 56px;
    min-width: 56px;
}
.main-container .module-nav,
.main-container .mod-switcher-container {
    width: 56px !important;
    max-width: 56px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* Tránh mục cuối (Project...) bị chặn: padding đáy + cho phép scroll */
.module-nav .mod-switcher-container,
#modnavigator .mod-switcher-container {
    padding-bottom: 20px !important;
    min-height: 0 !important;
}
.main-container .sidebar-essentials {
    left: 56px !important;
}
.main-container .content-area {
    padding-left: 296px !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 200px !important;
}
.main-container .settingsPageDiv {
    padding-left: 296px !important;
}

/* Settings-only: restore normal Settings sidebar/layout (do not affect CRM module sidebars) */
.main-container .module-nav.settingsNav,
.main-container #modnavigator.settingsNav {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.main-container .module-nav.settingsNav .settingsgroup {
    width: 100% !important;
    max-width: 100% !important;
}

.main-container .settingsPageDiv.content-area {
    /* module-nav.settingsNav is absolute overlay → offset content with margin-left */
    margin-left: 230px !important;
    padding-left: 15px !important;
}

/* Settings-only: ensure Settings sidebar text is readable */
.main-container .module-nav.settingsNav,
.main-container .module-nav.settingsNav * {
    opacity: 1 !important;
    visibility: visible !important;
}

.main-container .module-nav.settingsNav {
    background: #243746 !important;
}

.main-container .module-nav.settingsNav .settingsgroup,
.main-container .module-nav.settingsNav .settingsgroup a,
.main-container .module-nav.settingsNav .settingsgroup span,
.main-container .module-nav.settingsNav .settingsgroup div,
.main-container .module-nav.settingsNav .settingsgroup i {
    color: #ffffff !important;
}

.main-container .module-nav.settingsNav .settingsgroup .list-group a.menuItemLabel {
    color: #f5f7fa !important;
}

.main-container .module-nav.settingsNav .settingsgroup .list-group a.menuItemLabel.settingsgroup-menu-color,
.main-container .module-nav.settingsNav .settingsgroup .list-group a.menuItemLabel:hover,
.main-container .module-nav.settingsNav .settingsgroup .settingsgroup-accordion a:hover {
    color: #ffffff !important;
}

.main-container .module-nav.settingsNav #settingsMenuSearch,
.main-container .module-nav.settingsNav input.search-list {
    color: #333333 !important;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* Settings-only: solid dark panels (transparent was exposing white .panel-default / .module-nav) */
.main-container .module-nav.settingsNav .settingsgroup,
.main-container .module-nav.settingsNav .settingsgroup-panel,
.main-container .module-nav.settingsNav .panel,
.main-container .module-nav.settingsNav .panel-default,
.main-container .module-nav.settingsNav .panel-group,
.main-container .module-nav.settingsNav .app-settings-accordion,
.main-container .module-nav.settingsNav .settingsgroup-accordion,
.main-container .module-nav.settingsNav .panel-collapse,
.main-container .module-nav.settingsNav .panel-collapse.ulBlock,
.main-container .module-nav.settingsNav .list-group,
.main-container .module-nav.settingsNav .list-group-item {
    background-color: #2c3b49 !important;
    background: #2c3b49 !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.main-container .module-nav.settingsNav .settingsgroup-accordion a,
.main-container .module-nav.settingsNav .menuItemLabel {
    background-color: transparent !important;
    color: #ffffff !important;
}

.main-container .module-nav.settingsNav .settingsgroup-accordion a {
    display: block !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
}

.main-container .module-nav.settingsNav .panel-collapse.ulBlock,
.main-container .module-nav.settingsNav .list-group {
    background: #243746 !important;
}

.main-container .module-nav.settingsNav .list-group .menuItemLabel,
.main-container .module-nav.settingsNav .list-group a {
    display: block !important;
    padding: 9px 28px !important;
    background: #2f4658 !important;
    color: #ffffff !important;
}

.main-container .module-nav.settingsNav .settingsgroup-accordion a:hover,
.main-container .module-nav.settingsNav .list-group a:hover,
.main-container .module-nav.settingsNav .menuItemLabel:hover {
    background: #3a566b !important;
    color: #ffffff !important;
}

.main-container .module-nav.settingsNav i,
.main-container .module-nav.settingsNav .fa,
.main-container .module-nav.settingsNav .app-icon {
    color: #ffffff !important;
}

/* Settings sidebar (alternate template: SettingsSidebar.tpl uses .settings-sidebar) */
.main-container .settings-sidebar,
.main-container .settings-sidebar .sidebar-container,
.main-container .settings-sidebar .lists-menu-container {
    background: #243746 !important;
    color: #ffffff !important;
}

.main-container .settings-sidebar .lists-header,
.main-container .settings-sidebar .lists-header a,
.main-container .settings-sidebar .lists-header a:visited {
    color: #ffffff !important;
}

.main-container .settings-sidebar hr {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.main-container .settings-sidebar .settings-flip,
.main-container .settings-sidebar .settings-flip span,
.main-container .settings-sidebar .settings-flip i {
    color: #ffffff !important;
}

.main-container .settings-sidebar .settings-menu-items,
.main-container .settings-sidebar .settings-menu-items a,
.main-container .settings-sidebar .settings-menu-items a:visited {
    color: #f5f7fa !important;
}

.main-container .settings-sidebar .settings-menu-items a {
    display: block !important;
    padding: 9px 16px !important;
    border-radius: 8px;
}

.main-container .settings-sidebar .settings-menu-items a:hover {
    background: #3a566b !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ========================================================================== */
/* Settings UI — production-safe overrides (high specificity)                  */
/* Some environments override sidebar colors; force the localhost palette.     */
/* ========================================================================== */

body .main-container .module-nav.settingsNav,
body .main-container #modnavigator.settingsNav {
    background: #243746 !important;
}

body .main-container .module-nav.settingsNav .settingsgroup-accordion a,
body .main-container .module-nav.settingsNav .list-group a,
body .main-container .module-nav.settingsNav .menuItemLabel,
body .main-container .module-nav.settingsNav .settingsgroup,
body .main-container .module-nav.settingsNav .settingsgroup span,
body .main-container .module-nav.settingsNav .settingsgroup div,
body .main-container .module-nav.settingsNav .settingsgroup i {
    color: #ffffff !important;
}

body .main-container .module-nav.settingsNav .list-group a,
body .main-container .module-nav.settingsNav .list-group .menuItemLabel {
    background: #2f4658 !important;
}

body .main-container .module-nav.settingsNav .settingsgroup-accordion a:hover,
body .main-container .module-nav.settingsNav .list-group a:hover,
body .main-container .module-nav.settingsNav .menuItemLabel:hover {
    background: #3a566b !important;
}

/* Alternate Settings sidebar template (SettingsSidebar.tpl) */
body .main-container .settings-sidebar,
body .main-container .settings-sidebar .sidebar-container,
body .main-container .settings-sidebar .lists-menu-container {
    background: #243746 !important;
}

body .main-container .settings-sidebar .settings-menu-items a {
    background: #2f4658 !important;
    color: #ffffff !important;
}

body .main-container .settings-sidebar .settings-menu-items a:hover {
    background: #3a566b !important;
    color: #ffffff !important;
}
/* Tránh trang bị chặn: nội dung luôn trên, không bị đè bởi sidebar/footer */
.viewContent .content-area,
.listViewPageDiv.content-area,
.detailViewContent .content-area {
    position: relative !important;
    z-index: 2 !important;
}

/* Dashboard: ẩn dropdown "More" (reArrangeTabs) trên tab DASHBOARD như bạn yêu cầu */
body[data-module="Dashboard"] .dashBoardDropDown,
body[data-module="Dashboard"] .moreSettings .updateSequence {
    display: none !important;
}

/* Dashboard: xoá luôn thanh tab/menu đầu trang (chỉ giữ lại nội dung widget bên dưới) */
body[data-module="Dashboard"] .dashBoardContainer .tabContainer > ul.nav.nav-tabs {
    display: none !important;
}

/* Edit view: tất cả module (Management – Contacts, Leads, Accounts, …) nav không che form */
.main-container .editViewPageDiv .content-area {
    padding-left: 296px !important;
    padding-top: 24px !important;
    padding-bottom: 32px !important;
    min-width: 0;
}
.main-container .editViewPageDiv .editViewContents {
    padding: 20px 20px 32px;
}
/* Khi ẩn sidebar-essentials: edit view chỉ cần 72px (sau module-nav 56px) */
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials.sidebar-essentials.hide + .editViewPageDiv .content-area,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container .editViewPageDiv .content-area.full-width {
    padding-left: 72px !important;
}
/* Project & ProjectTask: giữ padding đủ rộng, thêm chút khoảng */
body[data-module="Project"] .main-container .editViewPageDiv .content-area {
    padding-left: 300px !important;
    padding-top: 140px !important;
    padding-bottom: 40px !important;
    min-width: 0;
}
body[data-module="ProjectTask"] .main-container .editViewPageDiv .content-area {
    padding-left: 300px !important;
    padding-top: 140px !important;
    padding-bottom: 40px !important;
    min-width: 0;
}
body[data-module="Project"] .main-container .editViewPageDiv .editViewContents,
body[data-module="ProjectTask"] .main-container .editViewPageDiv .editViewContents {
    padding: 24px 24px 40px;
}

/* Sidebar (Management, Project, Teams...): luôn hiện, không mất */
#sidebar,
#sidebar .module-nav,
#modnavigator,
.main-container .module-nav,
.main-container #modnavigator,
.main-container .mod-switcher-container {
    display: block !important;
    visibility: visible !important;
}
#sidebar .module-nav {
    display: block !important;
    background: #2c3e50;
    width: 56px !important;
    min-width: 56px !important;
    z-index: 2;
    position: relative;
}
/* Sidebar: scrollbar mỏng, bớt khúc dư */
#sidebar::-webkit-scrollbar,
.module-nav::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-track,
.module-nav::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb,
.module-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

.module-nav .toggled{
    width : 0px;
    overflow : hidden;
}

/* User Logout */
.logout-content{
    padding: 10px;
    width: 350px;
}
.profile-img-container{
    width: 85px;
    height: 100px;
    background: darkgreen;
    text-align: center;
    margin: 1px;
}
.profile-img-container .change-link{
    position: absolute;
    height: auto;
    background: #ddd;
    padding: 3px;
    bottom: 2px;
    font-size: 10px;
    width: 85px;
    text-align: center;
    opacity: 0.5;
}
.profile-img-container .change-link:hover{
    opacity: 1;
    cursor: pointer;
}
.profile-img-container .default-img{
    font-size: 5em;
    margin: 0;
    color: #fff;
}
.profile-container{
    display: inline-block;
    margin-right: 1px;
    padding-right: 1px;
    width: 180px;
}
.logout-footer hr{
    margin: 10px 0;   
}


/**********************************/
/**** Side vertical Nav styles ****/
/**********************************/
/*ul.app-menu{
    background: #fff;
    list-style: none;
    margin: 0;
    border: 1px solid;
    display: none;
}*/
.module-nav{
    background: #fff; 
}
/* Settings sidebar must not inherit the 56px white module-nav shell above */
.main-container .module-nav.settingsNav,
.main-container #modnavigator.settingsNav {
    background: #243746 !important;
    width: 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
}
.main-container .module-nav.settingsNav .settingsgroup,
.main-container .module-nav.settingsNav .settingsgroup .panel,
.main-container .module-nav.settingsNav .settingsgroup .panel-default {
    background: #2c3b49 !important;
}
/* Sidebar Management (Schedule, Teams, Report, Project...): luôn hiện, chỉ icon */
.module-nav .modules-menu,
#modnavigator .modules-menu,
#modules-menu {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    float: left;
    background: #2c3e50;
    padding-bottom: 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.modules-menu ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.modules-menu ul li a .mk-icon.menubar-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modules-menu ul li a .mk-icon.menubar-module-icon i.fa {
    font-size: 1.2em;
    line-height: 1;
}
.modules-menu ul li a{
    color: #ecf0f1;
    padding: 12px 10px;
    text-align: center;
    display: block;
    z-index: 1;
    border-left: none !important;
    transition: background 0.15s ease;
}
.modules-menu ul li a span{
    display: none !important;
}
.modules-menu ul li a:hover{
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.modules-menu ul li:hover, 
.modules-menu ul li.active{
    background: rgba(255,255,255,0.06);
}
.modules-menu ul li.active a{
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-weight: normal;
}
.module-nav .module-filters{
    width: 68%;
    float:left;
    background: linear-gradient(180deg, #3d5a80 0%, #293241 100%);
    border-left: 1px solid rgba(255,255,255,0.08);
}

/* Trang Teams: sidebar chỉ icon, không che nút */
body[data-module="Teams"] .main-container .module-nav,
body[data-module="Teams"] .main-container #modnavigator,
body[data-module="Teams"] .main-container .mod-switcher-container {
    width: 56px !important;
    max-width: 56px !important;
}
body[data-module="Teams"] .main-container #sidebar-essentials.sidebar-essentials {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
body[data-module="Teams"] .main-container .listViewPageDiv.content-area,
body[data-module="Teams"] .main-container .content-area,
body[data-module="Teams"] #listViewContent.listViewPageDiv {
    padding-left: 72px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
}
body[data-module="Teams"] .teams-page-container {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
body[data-module="Teams"] .teams-modern-header,
body[data-module="Teams"] .teams-header-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}
/* Center header block (icon + Teams + subtitle) */
body[data-module="Teams"] .teams-modern-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
body[data-module="Teams"] .teams-header-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
body[data-module="Teams"] .teams-header-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
body[data-module="Teams"] .teams-main-title {
    margin: 0 !important;
}
body[data-module="Teams"] .teams-subtitle {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}
body[data-module="Teams"] .teams-header-right {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
body[data-module="Teams"] .teams-action-btn {
    position: relative !important;
    z-index: 3 !important;
}

/* Teams: ẩn 2 nút Add Group và Add Person trên header */
body[data-module="Teams"] .teams-modern-header .teams-header-right .js-add-group,
body[data-module="Teams"] .teams-modern-header .teams-header-right .js-add-person {
    display: none !important;
}

/* Teams: bớt khoảng trắng – kéo nội dung lên, đừng để trống quá */
body[data-module="Teams"] .bodyContents {
    padding-top: 0 !important;
}
body[data-module="Teams"] .main-container .listViewPageDiv.content-area,
body[data-module="Teams"] .main-container .content-area {
    padding-top: 4px !important;
}
body[data-module="Teams"] .teams-page-container {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    margin-top: 0 !important;
}
body[data-module="Teams"] .teams-modern-header {
    margin-bottom: 8px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
body[data-module="Teams"] .teams-modern-tabs {
    margin-bottom: 8px !important;
}

/* ========== Sidebar Essentials: các trang khác (Leads, Contacts, Project, Reports, ...) ========== */
/* Trừ Calendar và Teams đã có sidebar riêng */
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials.sidebar-essentials {
    display: inline-block !important;
    width: 240px !important;
    min-width: 240px !important;
    position: absolute !important;
    left: 56px !important;
    top: 0 !important;
    bottom: 0 !important;
    min-height: 100% !important;
    background: linear-gradient(180deg, #3d4f5c 0%, #2c3e50 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1 !important;
    padding: 0 !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .sidebar-menu {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 0 24px !important;
    min-height: 100% !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .sidebar-header,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .lists-header,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials h5.sidebar-header {
    color: rgba(255,255,255,0.85) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 12px 12px 6px !important;
    padding: 0 !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .sidebar-container,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .module-filters .sidebar-container {
    padding: 0 12px 12px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials hr {
    border: 0 !important;
    height: 1px !important;
    background: rgba(255,255,255,0.1) !important;
    margin: 6px 12px 10px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .sidebar-btn {
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    color: #fff !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .sidebar-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .search-list {
    background: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #ecf0f1 !important;
    border-radius: 6px !important;
    margin: 6px 12px 10px !important;
    padding: 8px 10px !important;
    width: calc(100% - 24px) !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .search-list::placeholder {
    color: rgba(255,255,255,0.4) !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .lists-menu > li {
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .lists-menu > li > a {
    color: rgba(255,255,255,0.9) !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .lists-menu > li:hover,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .lists-menu > li.active {
    background: rgba(255,255,255,0.08) !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .toggleFilterSize {
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important;
    padding: 4px 12px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .listViewTagContainer .tag,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials .multiLevelTagList .tag {
    background: rgba(255,255,255,0.15) !important;
    color: #ecf0f1 !important;
    border: none !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials::-webkit-scrollbar {
    width: 6px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2) !important;
    border-radius: 3px !important;
}
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials::-webkit-scrollbar-track {
    background: transparent !important;
}
/* Khi ẩn sidebar (nút thu gọn): content full-width */
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials.sidebar-essentials.hide + .listViewPageDiv.content-area,
body:not([data-module="Calendar"]):not([data-module="Teams"]) .main-container #sidebar-essentials.sidebar-essentials.hide + .content-area {
    padding-left: 72px !important;
}

/* ========== Reports: list mới – colgroup đồng bộ title với nội dung ========== */
body[data-module="Reports"] .main-container #listViewContent.listViewPageDiv.content-area {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 24px 32px !important;
    padding-top: 140px !important;
    margin-top: 0 !important;
    background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 20%, #fefce8 50%, #f0fdf4 100%);
    background-attachment: fixed;
    min-height: 60vh;
    box-sizing: border-box;
}
body[data-module="Reports"] .main-container #listViewContent .col-sm-12.col-xs-12 {
    padding: 0;
    max-width: 100%;
}
body[data-module="Reports"] #listViewContent .listview-actions-container {
    background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 50%, #d1fae5 100%);
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
body[data-module="Reports"] #listViewContent .table-container {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 60%, #fefce8 100%);
    border-radius: 14px;
    border: 1px solid rgba(2, 132, 199, 0.35);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.12);
    width: fit-content;
    max-width: 100%;
}
/* Bảng Reports: colgroup % – full width, kích thước bình thường */
body[data-module="Reports"] #listViewContent .reports-listview-table {
    margin: 0;
    border: none;
    width: auto !important;
    table-layout: fixed !important;
    border-collapse: collapse;
}
body[data-module="Reports"] #listViewContent .reports-listview-table col.col-actions {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table col.col-reporttype {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table col.col-reportname {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table col.col-primarymodule {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table col.col-foldername {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table col.col-owner {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table thead th,
body[data-module="Reports"] #listViewContent .reports-listview-table tbody td {
    box-sizing: border-box !important;
    padding: 5px 8px !important;
    vertical-align: middle;
}
/* Header */
body[data-module="Reports"] #listViewContent .reports-listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 35%, #22c55e 70%, #08A045 100%);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    border-bottom: 2px solid rgba(2, 132, 199, 0.65);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
body[data-module="Reports"] #listViewContent .reports-listview-table .listViewContentHeaderValues {
    color: #fff;
}
body[data-module="Reports"] #listViewContent .reports-listview-table .listViewContentHeaderValues:hover {
    color: #bae6fd;
}
/* Search row */
body[data-module="Reports"] #listViewContent .reports-listview-table tr.searchRow th {
    background: linear-gradient(180deg, #cffafe 0%, #dbeafe 100%);
    padding: 4px 8px !important;
    border-bottom: 2px solid #bae6fd;
}
body[data-module="Reports"] #listViewContent .reports-listview-table tr.searchRow input,
body[data-module="Reports"] #listViewContent .reports-listview-table tr.searchRow select,
body[data-module="Reports"] #listViewContent .reports-listview-table tr.searchRow .select2-container .select2-selection {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #bae6fd;
    padding: 4px 6px;
    font-size: 11px;
    background: #fff;
}
/* Body rows */
body[data-module="Reports"] #listViewContent .reports-listview-table > tbody > tr.listViewEntries:nth-child(odd) {
    background: #ffffff;
}
body[data-module="Reports"] #listViewContent .reports-listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: linear-gradient(90deg, #ecfeff 0%, #dcfce7 50%, #f0f9ff 100%);
}
body[data-module="Reports"] #listViewContent .reports-listview-table > tbody > tr.listViewEntries:hover {
    background: linear-gradient(90deg, #bbf7d0 0%, #86efac 50%, #93c5fd 100%) !important;
    box-shadow: inset 4px 0 0 #08A045;
}

/* ========== Project list: màu sắc riêng + Times New Roman ========== */
body[data-module="Project"] {
    font-family: "Times New Roman", Times, serif !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: linear-gradient(135deg, #ffe4e6 0%, #fbcfe8 50%, #e0e7ff 100%);
    border: 1px solid rgba(219, 39, 119, 0.35);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(219, 39, 119, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #6366f1 100%);
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: linear-gradient(90deg, #fdf2f8 0%, #eef2ff 60%, #f5f3ff 100%);
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: linear-gradient(90deg, #fbcfe8 0%, #c7d2fe 50%, #ddd6fe 100%) !important;
    box-shadow: inset 4px 0 0 #ec4899;
}

/* ========== ProjectTask list: màu sắc riêng + Times New Roman ========== */
body[data-module="ProjectTask"] {
    font-family: "Times New Roman", Times, serif !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #cffafe 100%);
    border: 1px solid rgba(5, 150, 105, 0.35);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #0ea5e9 100%);
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: linear-gradient(90deg, #ecfeff 0%, #f0fdf4 60%, #e0f2fe 100%);
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: linear-gradient(90deg, #bbf7d0 0%, #a5f3fc 50%, #bae6fd 100%) !important;
    box-shadow: inset 4px 0 0 #10b981;
}
body[data-module="Reports"] #listViewContent .reports-listview-table > tbody > tr > td {
    font-size: 11px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
body[data-module="Reports"] #listViewContent .reports-listview-table td .fieldValue .value a {
    color: #0284c7;
    font-weight: 600;
}
body[data-module="Reports"] #listViewContent .reports-listview-table td .fieldValue .value a:hover {
    color: #0c4a6e;
    text-decoration: underline;
}
body[data-module="Reports"] #listViewContent .reports-listview-table td .fieldValue .value {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* floatThead: clone dùng cùng colgroup – cần width giống bảng gốc */
body[data-module="Reports"] .floatThead-floatContainer .floatThead-table {
    table-layout: fixed !important;
    width: 100% !important;
}
body[data-module="Reports"] .floatThead-floatContainer .floatThead-table > thead > tr > th {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
    color: #fff !important;
    box-sizing: border-box !important;
}
/* Ẩn size-row */
body[data-module="Reports"] #listViewContent .reports-listview-table > thead > tr.size-row {
    visibility: hidden !important;
    height: 0 !important;
}
body[data-module="Reports"] #listViewContent .reports-listview-table > thead > tr.size-row > th {
    padding: 0 !important;
    border: none !important;
    height: 0 !important;
}
/* Table actions, Search button, Select2, icons, empty, app-nav */
body[data-module="Reports"] #listViewContent .reports-listview-table .table-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
body[data-module="Reports"] #listViewContent .reports-listview-table tr.searchRow .btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
}
body[data-module="Reports"] #listViewContent .reports-listview-table tr.searchRow .btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}
body[data-module="Reports"] #listViewContent .reports-listview-table td .fa-pie-chart,
body[data-module="Reports"] #listViewContent .reports-listview-table td .vicon-detailreport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body[data-module="Reports"] #listViewContent .emptyRecordsDiv {
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
body[data-module="Reports"] .app-nav .addButton.module-buttons {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    color: #fff !important;
}
/* Reports: nút nhỏ gọn */
body[data-module="Reports"] #listViewContent .reports-listview-table .table-actions .input.checkbox,
body[data-module="Reports"] #listViewContent .reports-listview-table .table-actions input[type="checkbox"] {
    width: 14px;
    height: 14px;
}
body[data-module="Reports"] #listViewContent .reports-listview-table .table-actions span a,
body[data-module="Reports"] #listViewContent .reports-listview-table .table-actions .action {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

/* ========== Project & ProjectTask: list + edit + app-nav không bị sidebar che ========== */
/* Thanh module (icon + PROJECTS > All + nút): đẩy nội dung sang phải để không bị sidebar đè */
body[data-module="Project"] .app-nav,
body[data-module="ProjectTask"] .app-nav {
    padding-left: 300px !important;
    box-sizing: border-box;
}
/* Project list: app-nav + list sát trái (bỏ khoảng trống bên trái) */
body[data-module="Project"]:has(#listViewContent.list-view-sidebar-offset) .app-nav {
    padding-left: 56px !important;
    box-sizing: border-box;
}
/* Project & ProjectTask: app-nav gọn gàng – không lòi ra, không overflow */
body[data-module="Project"] .container-fluid.app-nav,
body[data-module="Project"] .container-fluid.app-nav.app-nav-MANAGEMENT,
body[data-module="ProjectTask"] .container-fluid.app-nav,
body[data-module="ProjectTask"] .container-fluid.app-nav.app-nav-MANAGEMENT {
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content {
    flex-wrap: wrap !important;
    gap: 6px;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content .navbar-right .nav,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content .navbar-right .nav {
    flex-wrap: nowrap !important;
    gap: 4px !important;
}
body[data-module="Project"] .app-nav .addButton.module-buttons,
body[data-module="Project"] .app-nav .btn-default.module-buttons,
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons {
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
}
body[data-module="Project"] .app-nav .addButton.module-buttons .fa,
body[data-module="Project"] .app-nav .btn-default.module-buttons .fa,
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons .fa,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons .fa {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content .module-breadcrumb,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content .module-breadcrumb {
    max-width: 50%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content .navbar-right,
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .pull-right,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content .navbar-right,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .pull-right {
    min-width: 0;
    flex-shrink: 0;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content .navbar-right .nav > li,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content .navbar-right .nav > li {
    margin: 0 2px;
}

/* RecycleBin: breadcrumb (Recycle Bin > List > Opportunities) thẳng hàng 1 dòng */
body[data-module="RecycleBin"] .app-nav .module-action-bar .module-action-content .module-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    max-width: 60%;
}
body[data-module="RecycleBin"] .app-nav .module-action-bar .module-action-content .module-breadcrumb > span {
    display: flex;
    align-items: center;
    min-width: 0;
}
body[data-module="RecycleBin"] .app-nav .module-breadcrumb .pull-left {
    float: none !important;
}
body[data-module="RecycleBin"] .app-nav .module-breadcrumb .module-title {
    margin: 0 6px 0 0;
    line-height: 24px;
}
body[data-module="RecycleBin"] .app-nav .module-breadcrumb .current-filter-name {
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 24px;
    white-space: nowrap;
    min-width: 0;
}
body[data-module="RecycleBin"] .app-nav .module-breadcrumb .fa-angle-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 16px;
}
body[data-module="Project"] .app-nav .btn-default.module-buttons.dropdown-toggle,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons.dropdown-toggle {
    padding: 6px 10px !important;
    font-size: 12px !important;
}
body[data-module="ProjectTask"]:has(#listViewContent.list-view-sidebar-offset) .app-nav {
    padding-left: 56px !important;
    box-sizing: border-box;
}
body[data-module="Project"] .main-container .content-area,
body[data-module="ProjectTask"] .main-container .content-area {
    padding-left: 300px !important;
    min-width: 0;
    z-index: 2 !important;
}
/* ========== List view Project/ProjectTask: không bị sidebar che + giao diện mới ========== */
/* Dùng margin-left để cả khối list (kể cả floatThead) dịch sang phải, không còn bị đè */
body[data-module="ProjectTask"] .main-container .listViewPageDiv.content-area,
body[data-module="ProjectTask"] .main-container #listViewContent.listViewPageDiv,
.main-container #listViewContent.list-view-sidebar-offset {
    margin-left: 296px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
    box-sizing: border-box;
    max-width: none;
}
/* Project list: kéo list ra trái ngoài cùng (bỏ khoảng trống trái), ẩn sidebar khi xem list */
body[data-module="Project"] .main-container:has(#listViewContent.list-view-sidebar-offset) #sidebar-essentials.sidebar-essentials {
    display: none !important;
}
body[data-module="Project"] .main-container .listViewPageDiv.content-area#listViewContent.list-view-sidebar-offset,
body[data-module="Project"] .main-container #listViewContent.listViewPageDiv.list-view-sidebar-offset {
    margin-left: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-right: 8px !important;
    min-width: 0;
    box-sizing: border-box;
    max-width: none;
}
/* ProjectTask list: cùng kiểu – ẩn sidebar, list sát trái */
body[data-module="ProjectTask"] .main-container:has(#listViewContent.list-view-sidebar-offset) #sidebar-essentials.sidebar-essentials {
    display: none !important;
}
body[data-module="ProjectTask"] .main-container .listViewPageDiv.content-area#listViewContent.list-view-sidebar-offset,
body[data-module="ProjectTask"] .main-container #listViewContent.listViewPageDiv.list-view-sidebar-offset {
    margin-left: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-right: 8px !important;
    min-width: 0;
    box-sizing: border-box;
    max-width: none;
}
/* Khi thu gọn sidebar: list view Project/ProjectTask */
.main-container #listViewContent.list-view-sidebar-offset.full-width {
    margin-left: 56px !important;
    padding-left: 0 !important;
}

/* ========== List view mới: card + bảng đẹp (Project/ProjectTask và list-view-sidebar-offset) ========== */
#listViewContent.list-view-sidebar-offset {
    padding: 28px 16px 32px 16px !important;
    padding-top: 32px !important;
    background: #f8fafc;
    border-radius: 12px;
    margin-right: 0 !important;
    margin-top: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    max-width: 100% !important;
    min-height: calc(100vh - 160px);
}
#listViewContent.list-view-sidebar-offset .col-sm-12.col-xs-12 {
    padding: 0;
    max-width: 100%;
}
/* Project: kéo list sát header Projects (không để khoảng trắng) */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .col-sm-12.col-xs-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ProjectTask: tương tự Project */
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .col-sm-12.col-xs-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#listViewContent.list-view-sidebar-offset .essentials-toggle {
    top: 16px;
    left: 8px;
}
#listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
#listViewContent.list-view-sidebar-offset .table-container {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding-top: 12px;
}
/* Tránh header nổi (floatThead) đè lên hàng header thật */
#listViewContent.list-view-sidebar-offset .floatThead-wrapper {
    padding-top: 0;
}
#listViewContent.list-view-sidebar-offset .floatThead-floatContainer {
    top: 12px !important;
    z-index: 10;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .floatThead-floatContainer {
    top: 8px !important;
}
#listViewContent.list-view-sidebar-offset .listview-table {
    margin-bottom: 0;
    border: none;
    min-width: 100%;
}
#listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: #f8fafc;
    color: #374151;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 16px;
    border-bottom: 2px solid #e5e7eb;
    line-height: 1.3;
    vertical-align: middle;
}
#listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries {
    transition: background 0.15s ease;
}
#listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: #f8fafc;
}
#listViewContent.list-view-sidebar-offset .listview-table > tbody > tr > td {
    padding: 12px 16px;
    color: #374151;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
#listViewContent.list-view-sidebar-offset .listview-table .table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
    min-width: 140px;
}
#listViewContent.list-view-sidebar-offset .listview-table .table-actions .input.checkbox,
#listViewContent.list-view-sidebar-offset .listview-table .table-actions input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
#listViewContent.list-view-sidebar-offset .listview-table .table-actions span a,
#listViewContent.list-view-sidebar-offset .listview-table .table-actions .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #6b7280;
    transition: background 0.2s ease, color 0.2s ease;
}
#listViewContent.list-view-sidebar-offset .listview-table .table-actions span a:hover,
#listViewContent.list-view-sidebar-offset .listview-table .table-actions .action:hover {
    background: #f1f5f9;
    color: #1e40af;
}
#listViewContent.list-view-sidebar-offset .listview-table .listViewContentHeaderValues {
    color: #374151;
    font-weight: 600;
}
#listViewContent.list-view-sidebar-offset .listview-table .listViewContentHeaderValues:hover {
    color: #1e40af;
}
/* Documents: cột FILE NAME – tránh chữ dài lấn sang cột Modified Time */
body[data-module="Documents"] #listViewContent .listview-table td[data-name="filename"] {
    max-width: 220px;
    overflow: hidden;
}
body[data-module="Documents"] #listViewContent .listview-table td[data-name="filename"] .fieldValue .value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a {
    color: #2563eb;
    font-weight: 500;
}
#listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a:hover {
    text-decoration: underline;
}
/* FloatThead clone: đồng bộ style header */
#listViewContent.list-view-sidebar-offset .floatThead-table.listview-table > thead > tr > th {
    background: #f8fafc;
    padding: 12px 16px;
    border-bottom: 2px solid #e5e7eb;
}
#listViewContent.list-view-sidebar-offset .listview-pagination,
#listViewContent.list-view-sidebar-offset .listViewActions {
    margin: 0;
}
#listViewContent.list-view-sidebar-offset .bottom-fixed-scroll {
    border: none;
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
#listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th {
    background: #fafbfc;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
}
#listViewContent.list-view-sidebar-offset .listview-table tr.searchRow input,
#listViewContent.list-view-sidebar-offset .listview-table tr.searchRow select,
#listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .select2-container .select2-selection {
    color: #0f172a !important;
    background: #ffffff !important;
}
#listViewContent.list-view-sidebar-offset .listview-table tr.searchRow input::placeholder,
#listViewContent.list-view-sidebar-offset .listview-table tr.searchRow select::placeholder {
    color: #94a3b8 !important;
}

/* ========== Documents List View (MANAGEMENT) – hiện đại, dễ nhìn, không nặng hiệu ứng ========== */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset {
    background: radial-gradient(circle at top left, #e0f2fe 0%, #f9fafb 45%, #eef2ff 100%);
    border-radius: 16px;
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 4px 14px 20px;
    margin-top: 10px;
    margin-bottom: 14px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    display: none !important;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    border-collapse: separate;
    border-spacing: 0;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(90deg, #eff6ff, #e0f2fe);
    color: #0f172a;
    border-color: #dbeafe;
    border-top-width: 0;
}
/* Bo tròn góc trên để không lộ nền trắng thừa */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th:first-child {
    border-top-left-radius: 12px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th:last-child {
    border-top-right-radius: 12px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th {
    background: rgba(15, 23, 42, 0.02);
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: #f9fafb;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: #eef2ff;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a {
    color: #2563eb;
    font-weight: 600;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}
/* Ô filter (search row) trên Documents – rộng, dễ đọc, không che chữ */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th {
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Nút Search ở cột đầu – nhỏ gọn, không chiếm hết chiều ngang */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th.inline-search-btn .table-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th.inline-search-btn .btn.btn-success {
    width: auto;
    padding: 4px 10px;
    font-size: 11px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th.inline-search-btn .s2-btn-text {
    display: inline;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .listSearchContributor.inputElement {
    width: 100%;
    height: 28px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 12px;
    box-shadow: none;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .select2-container,
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .select2-container-multi {
    width: 100% !important;
    font-size: 12px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .select2-container .select2-choice,
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .select2-container .select2-choices {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    min-height: 28px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .select2-container .select2-choice > .select2-chosen {
    line-height: 26px;
}
/* Title cột Documents – nổi bật hơn một chút */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="notes_title"] .fieldValue .value a {
    font-size: 13px;
}
/* Badge cho Download Type (Internal / External) */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="filelocationtype"] .value {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="filelocationtype"][data-rawvalue="I"] .value {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="filelocationtype"][data-rawvalue="E"] .value {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}
/* Badge cho Active (Yes / No) */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="filestatus"] .value {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="filestatus"][data-rawvalue="1"] .value {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="filestatus"][data-rawvalue="0"] .value {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
/* Documents: thanh gập/hiện left panel (essentials-toggle) – xanh/trắng hiện đại */
body[data-module="Documents"] #listViewContent .essentials-toggle {
    border-radius: 999px;
    padding: 4px 10px;
    background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 40%, #ffffff 100%);
    border: 1px solid #bfdbfe;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    margin-bottom: 0 !important;
}
body[data-module="Documents"] #listViewContent .essentials-toggle-marker {
    color: #1d4ed8;
}
body[data-module="Documents"] #listViewContent .essentials-toggle:hover {
    background: linear-gradient(90deg, #bfdbfe 0%, #e0f2fe 40%, #ffffff 100%);
    border-color: #60a5fa;
}
body[data-module="Documents"] #listViewContent .essentials-toggle:hover .essentials-toggle-marker {
    color: #1e3a8a;
}
/* FloatThead (sticky header) của Documents: tránh bị “chèn/đè” do size-row và rule top global */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.size-row {
    display: none !important;
    height: 0 !important;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.size-row > th {
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important;
}
/* Documents: sát thanh gập (>) với list – bỏ đệm trên của container */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .table-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Tắt sticky header (floatThead) riêng cho Documents để không bị nhảy layout sau 1–2s */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .floatThead-floatContainer {
    display: none !important;
}
/* Giữ header/searchRow gốc luôn hiển thị kể cả khi plugin cố ẩn thead */
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .listview-table > thead {
    display: table-header-group !important;
    visibility: visible !important;
}

/* ========== Project List View – full, không card riêng, header căn thẳng ========== */
body[data-module="Project"] .main-container:has(#listViewContent.list-view-sidebar-offset) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 16px 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    overflow: visible !important;
}
/* Breadcrumb */
body[data-module="Project"] .module-breadcrumb .module-title {
    color: #1e1b4b;
    font-weight: 600;
    font-size: 14px;
}
body[data-module="Project"] .module-breadcrumb .module-title::before {
    content: "\f07b";
    font-family: "FontAwesome";
    margin-right: 10px;
    color: #6366f1;
}
body[data-module="Project"] .module-breadcrumb .filter-name a {
    color: #4338ca;
    font-weight: 500;
    font-size: 14px;
}
body[data-module="Project"] .module-breadcrumb .fa-angle-right {
    color: #a5b4fc;
    margin-right: 6px;
}
/* Project & ProjectTask: canh header + không scroll dọc + bỏ hết khung/viền trong thanh nav */
body[data-module="Project"] .container-fluid.app-nav,
body[data-module="ProjectTask"] .container-fluid.app-nav {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow-y: hidden !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body[data-module="Project"] .app-nav .module-action-bar,
body[data-module="ProjectTask"] .app-nav .module-action-bar {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body[data-module="Project"] .app-nav .module-action-bar.coloredBorderTop,
body[data-module="ProjectTask"] .app-nav .module-action-bar.coloredBorderTop {
    border-top: none !important;
}
body[data-module="Project"] .app-nav .module-action-bar::after,
body[data-module="ProjectTask"] .app-nav .module-action-bar::after {
    display: none !important;
}
body[data-module="Project"] .app-nav .btn-default.module-buttons,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons,
body[data-module="Project"] .app-nav .addButton.module-buttons,
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons {
    border: none !important;
    box-shadow: none !important;
}
body[data-module="Project"] .app-nav .module-action-content,
body[data-module="ProjectTask"] .app-nav .module-action-content {
    border: none !important;
    box-shadow: none !important;
}

/* ========== Project & ProjectTask: thiết kế tương lai – màu sắc + hiệu ứng ========== */
/* Thanh nav: nền gradient nhẹ, glassmorphism, gợn sáng – full chiều ngang (che luôn mảng xám 2 bên) */
body[data-module="Project"] .container-fluid.app-nav.app-nav-MANAGEMENT,
body[data-module="ProjectTask"] .container-fluid.app-nav.app-nav-MANAGEMENT {
    position: relative;
    background: transparent !important; /* nền thật để trống, dùng ::before phủ full màn hình */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none !important;
}
body[data-module="Project"] .container-fluid.app-nav.app-nav-MANAGEMENT::before,
body[data-module="ProjectTask"] .container-fluid.app-nav.app-nav-MANAGEMENT::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;              /* phủ full chiều ngang viewport */
    height: 100%;
    background: linear-gradient(135deg, rgba(248,250,252,0.97) 0%, rgba(241,245,249,0.98) 50%, rgba(226,232,240,0.95) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
    z-index: -1;               /* nằm dưới nội dung header */
}
body[data-module="Project"] .container-fluid.app-nav.app-nav-MANAGEMENT:hover::before,
body[data-module="ProjectTask"] .container-fluid.app-nav.app-nav-MANAGEMENT:hover::before {
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}
/* Icon app (sitemap): viền sáng nhẹ, hover phát sáng */
body[data-module="Project"] .app-nav .app-indicator-icon-container,
body[data-module="ProjectTask"] .app-nav .app-indicator-icon-container {
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
body[data-module="Project"] .app-nav .app-indicator-icon-container:hover,
body[data-module="ProjectTask"] .app-nav .app-indicator-icon-container:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 4px 12px rgba(14, 165, 233, 0.4));
}
body[data-module="Project"] .app-nav .app-indicator-icon-container .app-indicator-icon,
body[data-module="ProjectTask"] .app-nav .app-indicator-icon-container .app-indicator-icon {
    transition: transform 0.3s ease;
}
body[data-module="Project"] .app-nav .app-indicator-icon-container:hover .app-indicator-icon,
body[data-module="ProjectTask"] .app-nav .app-indicator-icon-container:hover .app-indicator-icon {
    transform: rotate(-5deg) scale(1.05);
}
/* Breadcrumb: màu tương lai, hover mượt */
body[data-module="Project"] .app-nav .module-breadcrumb .module-title,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb .module-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
body[data-module="Project"] .app-nav .module-breadcrumb .module-title::before,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb .module-title::before {
    transition: color 0.25s ease, transform 0.25s ease;
}
body[data-module="Project"] .app-nav .module-breadcrumb a:hover .module-title,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb a:hover .module-title {
    color: #0369a1 !important;
}
body[data-module="Project"] .app-nav .module-breadcrumb .filter-name a,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb .filter-name a {
    transition: color 0.25s ease, transform 0.2s ease;
}
body[data-module="Project"] .app-nav .module-breadcrumb .filter-name a:hover,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb .filter-name a:hover {
    color: #0ea5e9 !important;
}
body[data-module="ProjectTask"] .app-nav .module-breadcrumb .filter-name a:hover {
    color: #16a34a !important;
}
/* Nút Add / Import: gradient tương lai + glow + hiệu ứng hover */
body[data-module="Project"] .app-nav .addButton.module-buttons {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #0284c7 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35), 0 0 0 1px rgba(255,255,255,0.2) inset !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-module="Project"] .app-nav .addButton.module-buttons:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #0284c7 100%) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.5), 0 0 0 1px rgba(255,255,255,0.3) inset !important;
    transform: translateY(-2px) scale(1.02);
}
body[data-module="Project"] .app-nav .addButton.module-buttons:active {
    transform: translateY(0) scale(0.98);
}
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons {
    background: linear-gradient(135deg, #22c55e 0%, #10b981 50%, #16a34a 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35), 0 0 0 1px rgba(255,255,255,0.2) inset !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons:hover {
    background: linear-gradient(135deg, #10b981 0%, #22c55e 50%, #16a34a 100%) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.5), 0 0 0 1px rgba(255,255,255,0.3) inset !important;
    transform: translateY(-2px) scale(1.02);
}
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons:active {
    transform: translateY(0) scale(0.98);
}
/* Nút Customize: style tương lai – xám sang, hover nổi */
body[data-module="Project"] .app-nav .btn-default.module-buttons.dropdown-toggle,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons.dropdown-toggle {
    background: linear-gradient(135deg, rgba(248,250,252,0.95) 0%, rgba(241,245,249,0.98) 100%) !important;
    color: #475569 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(148, 163, 184, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-module="Project"] .app-nav .btn-default.module-buttons.dropdown-toggle:hover,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons.dropdown-toggle:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(100, 116, 139, 0.35) !important;
    transform: translateY(-2px) scale(1.02);
}
body[data-module="Project"] .app-nav .btn-default.module-buttons .fa,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons .fa {
    transition: transform 0.25s ease;
}
body[data-module="Project"] .app-nav .btn-default.module-buttons:hover .fa,
body[data-module="ProjectTask"] .app-nav .btn-default.module-buttons:hover .fa {
    transform: rotate(-15deg);
}

/* Project & ProjectTask: row + icon theo báo cáo AI – gap, căn giữa, đồng bộ chiều cao */
body[data-module="Project"] .app-nav .row,
body[data-module="ProjectTask"] .app-nav .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body[data-module="Project"] .app-nav .row > .col-sm-1.app-indicator-icon-container,
body[data-module="ProjectTask"] .app-nav .row > .col-sm-1.app-indicator-icon-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
    width: auto !important;
}
body[data-module="Project"] .app-nav .row > .col-sm-1,
body[data-module="ProjectTask"] .app-nav .row > .col-sm-1 {
    padding-right: 4px !important;
}
body[data-module="Project"] .app-nav .row > .col-sm-11.padding0,
body[data-module="ProjectTask"] .app-nav .row > .col-sm-11.padding0 {
    padding-left: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
body[data-module="Project"] .app-nav .module-action-bar.padding0,
body[data-module="ProjectTask"] .app-nav .module-action-bar.padding0 {
    padding-left: 0 !important;
    width: 100% !important;
}
/* Thanh nội dung: full rộng, breadcrumb trái / nút phải, có khoảng giữa */
body[data-module="Project"] .app-nav .module-action-content,
body[data-module="Project"] .app-nav .Project-module-action-content,
body[data-module="ProjectTask"] .app-nav .module-action-content,
body[data-module="ProjectTask"] .app-nav .ProjectTask-module-action-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 24px !important;
}
/* Nhóm nút: giữ vị trí ở cuối – sát phải */
body[data-module="Project"] .app-nav .module-action-content > .pull-right,
body[data-module="ProjectTask"] .app-nav .module-action-content > .pull-right {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    order: 2 !important;
}
body[data-module="Project"] .app-nav .module-action-content .navbar-right,
body[data-module="ProjectTask"] .app-nav .module-action-content .navbar-right {
    margin-left: auto !important;
    justify-content: flex-end !important;
}
body[data-module="Project"] .app-nav .module-action-content .nav.navbar-nav,
body[data-module="ProjectTask"] .app-nav .module-action-content .nav.navbar-nav {
    justify-content: flex-end !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Project & ProjectTask: appnavcontent theo report AI */
body[data-module="Project"] .app-nav #appnav nav.navbar .container-fluid,
body[data-module="ProjectTask"] .app-nav #appnav nav.navbar .container-fluid {
    display: flex !important;
    align-items: center !important;
}
body[data-module="Project"] .app-nav #appnavcontent,
body[data-module="ProjectTask"] .app-nav #appnavcontent {
    margin-left: auto !important;
    border: none !important;
}

/* Nav trong app-nav Project/ProjectTask: nền trong suốt, không viền, không mảng xám bên phải */
body[data-module="Project"] .app-nav #appnav nav.navbar.navbar-inverse.border0.margin0,
body[data-module="ProjectTask"] .app-nav #appnav nav.navbar.navbar-inverse.border0.margin0 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ẩn nút ba chấm (navbar-toggle) cạnh Add Project / Import trong app-nav Project & ProjectTask */
body[data-module="Project"] .app-nav #appnav .navbar-header .navbar-toggle,
body[data-module="ProjectTask"] .app-nav #appnav .navbar-header .navbar-toggle {
    display: none !important;
}

/* Xóa nền/viền phần chứa nút (navbar-collapse) để không còn mảng xám bên phải */
body[data-module="Project"] .app-nav #appnav .navbar-collapse,
body[data-module="ProjectTask"] .app-nav #appnav .navbar-collapse,
body[data-module="Project"] .app-nav #appnav #appnavcontent,
body[data-module="ProjectTask"] .app-nav #appnav #appnavcontent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Cột nút bên phải cũng trong suốt hoàn toàn */
body[data-module="Project"] .app-nav .col-lg-5.col-md-6.col-sm-7.col-xs-1.padding0.pull-right,
body[data-module="ProjectTask"] .app-nav .col-lg-5.col-md-6.col-sm-7.col-xs-1.padding0.pull-right {
    background: transparent !important;
}

/* Không cần header riêng trong nav (tránh ô nhỏ màu khác) */
body[data-module="Project"] .app-nav #appnav .navbar-header,
body[data-module="ProjectTask"] .app-nav #appnav .navbar-header {
    background: transparent !important;
    border: none !important;
}
/* Cột breadcrumb: rộng đúng nội dung, dính đầu hàng */
body[data-module="Project"] .app-nav .module-action-content > .col-lg-7.padding0,
body[data-module="Project"] .app-nav .module-action-content > .col-md-6.padding0,
body[data-module="Project"] .app-nav .module-action-content > .col-sm-5.padding0,
body[data-module="ProjectTask"] .app-nav .module-action-content > .col-lg-7.padding0,
body[data-module="ProjectTask"] .app-nav .module-action-content > .col-md-6.padding0,
body[data-module="ProjectTask"] .app-nav .module-action-content > .col-sm-5.padding0 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
    order: 1 !important;
}
/* Project & ProjectTask – List view breadcrumb (Projects > All): quay về nhẹ nhàng, không ép flex quá nhiều */
body[data-module="Project"] .app-nav .module-breadcrumb.module-breadcrumb-List,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb.module-breadcrumb-List {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
/* bỏ float để flex cha căn chuẩn, nhưng giữ layout gần gốc */
body[data-module="Project"] .app-nav .module-breadcrumb.module-breadcrumb-List .pull-left,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb.module-breadcrumb-List .pull-left {
    float: none !important;
}
body[data-module="Project"] .app-nav .module-breadcrumb.module-breadcrumb-List a[title],
body[data-module="ProjectTask"] .app-nav .module-breadcrumb.module-breadcrumb-List a[title],
body[data-module="Project"] .app-nav .module-breadcrumb.module-breadcrumb-List .current-filter-name.filter-name,
body[data-module="ProjectTask"] .app-nav .module-breadcrumb.module-breadcrumb-List .current-filter-name.filter-name {
    display: inline-flex !important;
    align-items: center !important;
}
/* Detail view: breadcrumb Project(s) > RecordName – theo report AI */
body[data-module="Project"] .app-nav .module-action-content .module-breadcrumb.module-breadcrumb-Detail,
body[data-module="ProjectTask"] .app-nav .module-action-content .module-breadcrumb.module-breadcrumb-Detail {
    align-self: flex-start !important;
}

/* ========== Cùng style app-nav cho cấu trúc .container-fluid.app-nav + #app-menu + module-breadcrumb (Users, v.v.) ========== */
body[data-module="Users"] .container-fluid.app-nav,
body[data-module="Users"] .container-fluid.app-nav.app-nav-MANAGEMENT {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow-y: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, rgba(248,250,252,0.97) 0%, rgba(241,245,249,0.98) 50%, rgba(226,232,240,0.95) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body[data-module="Users"] .app-nav .module-action-bar,
body[data-module="Users"] .app-nav .module-action-bar.coloredBorderTop {
    border: none !important;
    box-shadow: none !important;
}
body[data-module="Users"] .app-nav .module-action-bar::after {
    display: none !important;
}
body[data-module="Users"] .app-nav .module-action-content,
body[data-module="Users"] .app-nav .module-action-content .module-breadcrumb {
    border: none !important;
    box-shadow: none !important;
}
body[data-module="Users"] .app-nav .module-action-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 24px !important;
}
body[data-module="Users"] .app-nav .btn-default.module-buttons,
body[data-module="Users"] .app-nav .addButton.module-buttons {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
body[data-module="Users"] .app-nav .module-breadcrumb.module-breadcrumb-List {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
body[data-module="Users"] .app-nav .module-breadcrumb.module-breadcrumb-List .pull-left {
    float: none !important;
}
body[data-module="Users"] .app-nav .module-breadcrumb.module-breadcrumb-List a[title],
body[data-module="Users"] .app-nav .module-breadcrumb.module-breadcrumb-List .current-filter-name.filter-name {
    display: inline-flex !important;
    align-items: center !important;
}
body[data-module="Users"] .app-nav .row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body[data-module="Users"] .app-nav .app-indicator-icon-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
body[data-module="Users"] .app-nav .module-action-content > .pull-right,
body[data-module="Users"] .app-nav .module-action-content .navbar-right {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

/* Project: canh header giống lúc 3 nút thẳng hàng với icon Project */
body[data-module="Project"] .app-nav .module-action-bar .module-action-content {
    align-items: center !important;
}
body[data-module="Project"] .app-nav .row {
    align-items: center !important;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .col-lg-7,
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .col-md-6,
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .col-sm-5 {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .col-lg-5,
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .col-md-6,
body[data-module="Project"] .app-nav .module-action-bar .module-action-content > .col-sm-7 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ProjectTask: cùng kiểu canh hàng và overflow-y hidden cho thanh nav */
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content {
    align-items: center !important;
}
body[data-module="ProjectTask"] .app-nav .row {
    align-items: center !important;
}
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-lg-7,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-md-6,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-sm-5,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-lg-5,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-md-6,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-sm-7 {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ========== SUPPORT / Tickets (HelpDesk) – header giống MANAGEMENT ========== */
/* Thanh nav: nền gradient giống MANAGEMENT nhưng tông SUPPORT (tím) */
body[data-module="HelpDesk"] .container-fluid.app-nav,
body[data-module="HelpDesk"] .container-fluid.app-nav.app-nav-SUPPORT {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow-y: hidden !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body[data-module="HelpDesk"] .container-fluid.app-nav.app-nav-SUPPORT {
    position: relative;
    background: transparent !important;
}
body[data-module="HelpDesk"] .container-fluid.app-nav.app-nav-SUPPORT::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: linear-gradient(135deg, rgba(250,250,252,0.98) 0%, rgba(243,232,255,0.98) 40%, rgba(221,214,254,0.98) 100%);
    box-shadow: 0 4px 24px rgba(88, 28, 135, 0.10), 0 1px 0 rgba(255,255,255,0.9) inset;
    z-index: -1;
}

/* Khung action bar: bỏ viền, height auto để flex đẹp */
body[data-module="HelpDesk"] .app-nav .module-action-bar {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: auto !important;
}
body[data-module="HelpDesk"] .app-nav .module-action-bar.coloredBorderTop {
    border-top: none !important;
}
body[data-module="HelpDesk"] .app-nav .module-action-bar::after {
    display: none !important;
}

/* Hàng app-nav: icon + breadcrumb + nút cùng một hàng, căn giữa dọc */
body[data-module="HelpDesk"] .app-nav .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body[data-module="HelpDesk"] .app-nav .row > .col-sm-1.app-indicator-icon-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
    width: auto !important;
}
body[data-module="HelpDesk"] .app-nav .row > .col-sm-11.padding0 {
    padding-left: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Nội dung bên trong: breadcrumb trái, nút phải, full rộng */
body[data-module="HelpDesk"] .app-nav .module-action-bar.padding0 {
    padding-left: 0 !important;
    width: 100% !important;
}
body[data-module="HelpDesk"] .app-nav .module-action-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 24px !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-module="HelpDesk"] .app-nav .module-action-content > .pull-right {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    order: 2 !important;
}
body[data-module="HelpDesk"] .app-nav .module-action-content .navbar-right,
body[data-module="HelpDesk"] .app-nav .module-action-content .nav.navbar-nav {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

/* appnav / nhóm nút: căn giữa dọc, bỏ nền xám */
body[data-module="HelpDesk"] .app-nav #appnav nav.navbar .container-fluid {
    display: flex !important;
    align-items: center !important;
}
body[data-module="HelpDesk"] .app-nav #appnavcontent {
    margin-left: auto !important;
    border: none !important;
}
body[data-module="HelpDesk"] .app-nav #appnav nav.navbar.navbar-inverse.border0.margin0 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-module="HelpDesk"] .app-nav #appnav .navbar-collapse,
body[data-module="HelpDesk"] .app-nav #appnav #appnavcontent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-module="HelpDesk"] .app-nav #appnav .navbar-header {
    background: transparent !important;
    border: none !important;
}
body[data-module="HelpDesk"] .app-nav #appnav .navbar-header .navbar-toggle {
    display: none !important;
}

/* Nút Tickets (Add Ticket, Customize, ...) – style tương tự Project nhưng tông SUPPORT */
body[data-module="HelpDesk"] .app-nav .addButton.module-buttons {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 14px rgba(129, 140, 248, 0.45), 0 0 0 1px rgba(255,255,255,0.25) inset !important;
    border: none !important;
}
body[data-module="HelpDesk"] .app-nav .addButton.module-buttons:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #4f46e5 100%) !important;
    box-shadow: 0 8px 24px rgba(129, 140, 248, 0.60), 0 0 0 1px rgba(255,255,255,0.35) inset !important;
    transform: translateY(-2px) scale(1.02);
}
body[data-module="HelpDesk"] .app-nav .addButton.module-buttons:active {
    transform: translateY(0) scale(0.98);
}
body[data-module="HelpDesk"] .app-nav .btn-default.module-buttons.dropdown-toggle {
    background: linear-gradient(135deg, rgba(248,250,252,0.96) 0%, rgba(237,233,254,0.98) 100%) !important;
    color: #4b5563 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 2px 8px rgba(55, 65, 81, 0.15), 0 0 0 1px rgba(156, 163, 175, 0.35) !important;
    border: none !important;
}
body[data-module="HelpDesk"] .app-nav .btn-default.module-buttons.dropdown-toggle:hover {
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%) !important;
    color: #111827 !important;
    box-shadow: 0 6px 18px rgba(55, 65, 81, 0.20), 0 0 0 1px rgba(107, 114, 128, 0.45) !important;
    transform: translateY(-2px) scale(1.02);
}
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-lg-5,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-md-6,
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content > .col-sm-7 {
    justify-content: flex-end !important;
}
body[data-module="ProjectTask"] .app-nav .module-action-bar .module-action-content .navbar-right {
    display: flex !important;
    align-items: center !important;
    overflow-y: hidden !important;
}
/* Project: ẩn thanh scroll dọc mặc định của trang (vẫn cuộn được bằng chuột/trackpad) */
body[data-module="Project"] {
    scrollbar-width: none; /* Firefox */
}
body[data-module="Project"]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

/* Project: nhóm nút bên phải gọn, không có khung riêng */
body[data-module="Project"] .app-nav .module-action-bar .module-action-content .navbar-right {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
body[data-module="Project"] .app-nav .module-action-bar .module-action-content .navbar-right .nav {
    gap: 6px !important;
}
/* Action bar – hiện đại, glassmorphism nhẹ */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 12px;
    padding: 8px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.06);
}
/* Nút Add: xanh dương dịu */
body[data-module="Project"] .app-nav .addButton.module-buttons {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
    transition: all 0.3s ease;
}
body[data-module="Project"] .app-nav .addButton.module-buttons:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
    transform: translateY(-1px);
}
body[data-module="Project"] .app-nav .addButton .fa {
    color: #fff !important;
}
/* Filter: nút xanh dương hiện đại */
body[data-module="Project"] #listViewContent .listColumnFilter {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 10px;
    background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
    color: #0ea5e9;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-module="Project"] #listViewContent .listColumnFilter:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    transform: translateY(-1px);
}
/* Bảng: card nổi hiện đại */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .table-container {
    background: #fff;
    border: 1px solid rgba(14, 165, 233, 0.12);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05), 0 0 0 1px rgba(255,255,255,0.5) inset;
    overflow-x: auto;
    overflow-y: visible;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
}
/* Căn thẳng header – search – data: cùng padding, box-sizing */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow > th,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries > td {
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: left !important;
    vertical-align: middle !important;
}
/* Cột 1 (Actions): căn giữa, width cố định */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th:first-child,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow > th:first-child,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries > td:first-child {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries > td:nth-child(2) {
    padding-left: 20px !important;
}
/* Search row – input có hiệu ứng */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th input {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th input:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    transition: all 0.25s ease;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow .btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}
/* Search row input: rộng 100% để khớp cột */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th input,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}
/* Header bảng: gradient xanh hiện đại */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border: none;
    border-bottom: 2px solid rgba(2, 132, 199, 0.6);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th a {
    color: #fff !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th a:hover {
    color: #bae6fd !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
/* Hàng dữ liệu: zebra + hover hiện đại */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries > td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13px;
    color: #1e293b;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    vertical-align: middle;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: linear-gradient(90deg, #f8fafc 0%, #fafbfc 100%);
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    box-shadow: inset 4px 0 0 #0ea5e9;
}
/* Link tên dự án: xanh + transition + fix render chữ */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    text-shadow: none;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value.textOverflowEllipsis {
    overflow: visible;
    text-overflow: clip;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a {
    color: #0284c7;
    font-weight: 500;
    transition: color 0.2s ease;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a:hover {
    color: #0ea5e9;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Status: badge gradient + shadow */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="projectstatus"] .value {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 11px;
    min-width: 60px;
    text-align: center;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table tr.listViewEntries:hover td[data-name="projectstatus"] .value {
    transform: scale(1.02);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4);
}
/* Progress: pill xanh lá + hiệu ứng */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="progress"] .value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    font-weight: 600;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(5, 150, 105, 0.12) 100%);
    transition: background 0.2s ease;
    cursor: pointer;
    pointer-events: auto;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="progress"] {
    pointer-events: auto;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="projecttype"] .value {
    color: #475569;
    font-weight: 500;
}
/* Ngày: màu xanh dương nhạt */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="startdate"] .value,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td[data-name="targetenddate"] .value {
    color: #0891b2;
    font-weight: 500;
}
/* Pagination */
body[data-module="Project"] #listViewContent .listview-actions-container .pagination,
body[data-module="Project"] #listViewContent .listview-actions-container .pageJump {
    font-size: 13px;
    color: #4f46e5;
    font-weight: 500;
}
/* Float header đồng bộ – gradient hiện đại */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .floatThead-table.listview-table > thead > tr > th {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%) !important;
    color: #fff !important;
    border: none;
    border-bottom: 2px solid rgba(2, 132, 199, 0.6);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .floatThead-table.listview-table > thead > tr > th:first-child {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
/* Cột Actions (checkbox + icon) – thu gọn + hover hiện đại */
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-left: 8px !important;
    max-width: 100% !important;
    overflow: visible !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions .action-star {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions .action-more {
    flex: 0 0 auto;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td.listViewRecordActions {
    white-space: nowrap !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions .input.checkbox,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions input[type="checkbox"] {
    opacity: 1 !important;
    z-index: 1;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table td.listViewRecordActions {
    overflow: visible !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions span a,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions .action {
    border-radius: 8px;
    transition: all 0.2s ease;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions span a:hover,
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table .table-actions .action:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    color: #0284c7 !important;
    transform: scale(1.08);
}

/* ========== ProjectTask List View – cùng layout với Project, tông xanh lá ========== */
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 20%, #fff 80%, #f8fafc 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 6px 10px 12px !important;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid #e2e8f0;
    overflow: visible !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .table-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow-x: auto;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff !important;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 5px 8px !important;
    border: none;
    border-bottom: 2px solid #15803d;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries > td {
    padding: 4px 8px !important;
    font-size: 13px !important;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: #fafafa;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: #f1f5f9 !important;
    box-shadow: inset 3px 0 0 #22c55e;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a {
    color: #16a34a;
    font-weight: 500;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table td .fieldValue .value a:hover {
    color: #15803d;
    text-decoration: underline;
}
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px !important;
}
body[data-module="ProjectTask"] .app-nav .addButton.module-buttons:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}
body[data-module="ProjectTask"] .app-nav .addButton .fa {
    color: #fff !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .floatThead-table.listview-table > thead > tr > th {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid #15803d;
    padding: 5px 8px !important;
    font-size: 10px !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table tr.searchRow th {
    padding: 4px 8px !important;
}

body[data-module="Project"] .main-container .editViewPageDiv .content-area {
    padding-left: 300px !important;
    padding-top: 140px !important;
    padding-bottom: 40px !important;
}
body[data-module="ProjectTask"] .main-container .editViewPageDiv .content-area {
    padding-left: 300px !important;
    padding-top: 140px !important;
    padding-bottom: 40px !important;
}
body[data-module="Project"] .main-container .editViewPageDiv .editViewContents,
body[data-module="ProjectTask"] .main-container .editViewPageDiv .editViewContents {
    padding: 24px 24px 40px;
    min-width: 0;
}
body[data-module="Project"] .main-container #sidebar-essentials.hide + .editViewPageDiv .content-area,
body[data-module="ProjectTask"] .main-container #sidebar-essentials.hide + .editViewPageDiv .content-area,
body[data-module="Project"] .main-container .editViewPageDiv.content-area.full-width,
body[data-module="ProjectTask"] .main-container .editViewPageDiv.content-area.full-width {
    padding-left: 72px !important;
}

/* ========== Project Add/Edit form – rộng rãi, hiệu ứng + màu sắc ========== */
body[data-module="Project"] .editViewPageDiv .content-area {
    background: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 25%, #f8fafc 50%, #f0f9ff 100%);
    background-attachment: fixed;
    padding-top: 140px !important;
    padding-bottom: 56px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body[data-module="Project"] .editViewPageDiv .content-area form#EditView {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
}
body[data-module="Project"] .editViewPageDiv .editViewContents {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}
body[data-module="Project"] .editViewPageDiv .editViewHeader {
    margin-bottom: 32px;
    text-align: center;
}
body[data-module="Project"] .editViewPageDiv .editHeader {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
body[data-module="Project"] .editViewPageDiv .fieldBlockContainer {
    background: #fff;
    border-radius: 18px;
    padding: 28px 32px 32px;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}
body[data-module="Project"] .editViewPageDiv .fieldBlockContainer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    opacity: 0.9;
    border-radius: 18px 0 0 18px;
}
body[data-module="Project"] .editViewPageDiv .fieldBlockContainer:hover {
    border-color: #a7f3d0;
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12), 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
body[data-module="Project"] .editViewPageDiv .fieldBlockHeader {
    font-size: 0.9rem;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 20px 0 !important;
    padding-bottom: 12px;
    padding-left: 4px;
    border-bottom: 2px solid #d1fae5;
    transition: color 0.2s ease;
}
body[data-module="Project"] .editViewPageDiv .fieldBlockContainer:hover .fieldBlockHeader {
    color: #065f46;
}
body[data-module="Project"] .editViewPageDiv .fieldBlockContainer hr {
    display: none;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless {
    margin: 0;
    border: none;
    width: 100%;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless tr {
    border: none;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless td {
    border: none;
    padding: 16px 12px 18px;
    vertical-align: middle;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless td.fieldLabel {
    width: 32%;
    max-width: 220px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    padding-right: 28px;
    vertical-align: middle;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless td.fieldValue {
    font-size: 14px;
    min-width: 200px;
    box-sizing: border-box;
    padding-left: 4px;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless td.fieldValue > * {
    max-width: 100%;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless input.form-control,
body[data-module="Project"] .editViewPageDiv .table.table-borderless input.inputElement,
body[data-module="Project"] .editViewPageDiv .table.table-borderless select.inputElement,
body[data-module="Project"] .editViewPageDiv .table.table-borderless textarea.form-control {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    min-height: 46px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
    background: #fafafa;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless input:hover,
body[data-module="Project"] .editViewPageDiv .table.table-borderless select:hover,
body[data-module="Project"] .editViewPageDiv .table.table-borderless textarea:hover {
    background: #fff;
    border-color: #cbd5e1;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless input:focus,
body[data-module="Project"] .editViewPageDiv .table.table-borderless select:focus,
body[data-module="Project"] .editViewPageDiv .table.table-borderless textarea:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    background: #fff;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless textarea.form-control {
    min-height: 100px;
    resize: vertical;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless .input-group.inputElement .dateField,
body[data-module="Project"] .editViewPageDiv .table.table-borderless .input-group.inputElement input.dateField {
    min-width: 150px !important;
    flex: 1 1 auto;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless .input-group.inputElement:has(.dateField) {
    display: flex !important;
    min-width: 0;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless .input-group.inputElement:has(.dateField) .input-group-addon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 0;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless .input-group.inputElement:has(.dateField) .input-group-addon .fa {
    margin: 0;
    vertical-align: middle;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless .redColor {
    color: #dc2626;
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer {
    background: linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
    border: 1px solid #a7f3d0;
    padding: 28px 32px 32px;
    margin-top: 32px;
    border-radius: 18px;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.12), 0 2px 8px rgba(0,0,0,0.04);
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer:hover {
    box-shadow: 0 12px 36px rgba(16, 185, 129, 0.15), 0 4px 12px rgba(0,0,0,0.06);
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer .textAlignCenter {
    text-align: center;
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer .saveButton {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border: none;
    color: #fff;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    transition: all 0.25s ease;
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer .saveButton:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    transform: translateY(-2px);
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer .saveButton:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer .cancelLink {
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    margin-left: 16px;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all 0.2s ease;
}
body[data-module="Project"] .editViewPageDiv .modal-overlay-footer .cancelLink:hover {
    background: #f0fdf4;
    border-color: #a7f3d0;
    color: #047857;
}
body[data-module="Project"] .editViewPageDiv .table.table-borderless .select2-container,
body[data-module="Project"] .editViewPageDiv .table.table-borderless .input-group {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body[data-module="Project"] .editViewPageDiv .select2-container--default .select2-selection--single,
body[data-module="Project"] .editViewPageDiv .select2-container--default .select2-selection--multiple {
    border-radius: 12px !important;
    border-color: #e2e8f0 !important;
    min-height: 46px !important;
    padding: 8px 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #fafafa !important;
    transition: all 0.25s ease !important;
}
body[data-module="Project"] .editViewPageDiv .select2-container {
    max-width: 100% !important;
    width: 100% !important;
}
body[data-module="Project"] .editViewPageDiv .select2-container--default.select2-container--focus .select2-selection--single,
body[data-module="Project"] .editViewPageDiv .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
    background: #fff !important;
}
body[data-module="Project"] .editViewPageDiv .duplicationMessageContainer {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.08);
}

/* ========== ProjectTask Add/Edit form – cùng thiết kế, màu tím/violet ========== */
body[data-module="ProjectTask"] .editViewPageDiv .content-area {
    background: linear-gradient(160deg, #faf5ff 0%, #f5f3ff 25%, #f8fafc 50%, #faf5ff 100%);
    background-attachment: fixed;
    padding-top: 140px !important;
    padding-bottom: 56px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body[data-module="ProjectTask"] .editViewPageDiv .content-area form#EditView {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
}
body[data-module="ProjectTask"] .editViewPageDiv .editViewContents {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}
body[data-module="ProjectTask"] .editViewPageDiv .editViewHeader {
    margin-bottom: 32px;
    text-align: center;
}
body[data-module="ProjectTask"] .editViewPageDiv .editHeader {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
body[data-module="ProjectTask"] .editViewPageDiv .fieldBlockContainer {
    background: #fff;
    border-radius: 18px;
    padding: 28px 32px 32px;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}
body[data-module="ProjectTask"] .editViewPageDiv .fieldBlockContainer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    opacity: 0.9;
    border-radius: 18px 0 0 18px;
}
body[data-module="ProjectTask"] .editViewPageDiv .fieldBlockContainer:hover {
    border-color: #bbf7d0;
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.12), 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
body[data-module="ProjectTask"] .editViewPageDiv .fieldBlockHeader {
    font-size: 0.9rem;
    font-weight: 700;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 20px 0 !important;
    padding-bottom: 12px;
    padding-left: 4px;
    border-bottom: 2px solid #dcfce7;
    transition: color 0.2s ease;
}
body[data-module="ProjectTask"] .editViewPageDiv .fieldBlockContainer:hover .fieldBlockHeader {
    color: #166534;
}
body[data-module="ProjectTask"] .editViewPageDiv .fieldBlockContainer hr {
    display: none;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless {
    margin: 0;
    border: none;
    width: 100%;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless tr {
    border: none;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless td {
    border: none;
    padding: 16px 12px 18px;
    vertical-align: middle;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless td.fieldLabel {
    width: 32%;
    max-width: 220px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    padding-right: 28px;
    vertical-align: middle;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless td.fieldValue {
    font-size: 14px;
    min-width: 200px;
    box-sizing: border-box;
    padding-left: 4px;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless td.fieldValue > * {
    max-width: 100%;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless input.form-control,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless input.inputElement,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless select.inputElement,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless textarea.form-control {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    min-height: 46px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
    background: #fafafa;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless input:hover,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless select:hover,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless textarea:hover {
    background: #fff;
    border-color: #cbd5e1;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless input:focus,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless select:focus,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless textarea:focus {
    border-color: #22c55e;
    outline: none;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
    background: #fff;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless textarea.form-control {
    min-height: 100px;
    resize: vertical;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .input-group.inputElement .dateField,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .input-group.inputElement input.dateField {
    min-width: 150px !important;
    flex: 1 1 auto;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .input-group.inputElement:has(.dateField) {
    display: flex !important;
    min-width: 0;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .input-group.inputElement:has(.dateField) .input-group-addon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 0;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .input-group.inputElement:has(.dateField) .input-group-addon .fa {
    margin: 0;
    vertical-align: middle;
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    padding: 28px 32px 32px;
    margin-top: 32px;
    border-radius: 18px;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 28px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(0,0,0,0.04);
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer:hover {
    box-shadow: 0 12px 36px rgba(34, 197, 94, 0.15), 0 4px 12px rgba(0,0,0,0.06);
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer .saveButton {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    border: none;
    color: #fff;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
    transition: all 0.25s ease;
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer .saveButton:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer .saveButton:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer .cancelLink {
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    margin-left: 16px;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all 0.2s ease;
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer .cancelLink:hover {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}
body[data-module="ProjectTask"] .editViewPageDiv .modal-overlay-footer .textAlignCenter {
    text-align: center;
}
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .select2-container,
body[data-module="ProjectTask"] .editViewPageDiv .table.table-borderless .input-group {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body[data-module="ProjectTask"] .editViewPageDiv .select2-container--default .select2-selection--single,
body[data-module="ProjectTask"] .editViewPageDiv .select2-container--default .select2-selection--multiple {
    border-radius: 12px !important;
    min-height: 46px !important;
    padding: 8px 14px !important;
    max-width: 100% !important;
    background: #fafafa !important;
    transition: all 0.25s ease !important;
}
body[data-module="ProjectTask"] .editViewPageDiv .select2-container--default.select2-container--focus .select2-selection--single,
body[data-module="ProjectTask"] .editViewPageDiv .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15) !important;
    background: #fff !important;
}
body[data-module="ProjectTask"] .editViewPageDiv .duplicationMessageContainer {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.08);
}

/** Lists Menu in Side bar */
.module-filters .sidebar-container{
    padding:0 12px;
}
.module-filters > hr{
    margin: 20px 12px; 
}
.lists-menu-container .lists-header{
    color: #fff;
    margin-top: 15px;
} 
.lists-menu-container hr{
    margin: 5px 0;
}
.lists-menu-container .menu-scroller{
    /* keep non-empty to satisfy linter; no visual change intended */
    position: relative;
}
/* mScrollbar customization for lists widget */
.lists-menu-container .menu-scroller .mCSB_scrollTools{
    width: 13px;
}
.lists-menu-container .menu-scroller .mCSB_inside > .mCSB_container {
    margin-right: 10px;
}
/* Customization ends */
.lists-menu-container .list-menu-content{
    padding-bottom: 120px;
}
.lists-menu-container .list-menu-content .more-less-link{
    color: #fff;
    /*text-decoration: none;*/
}

.lists-menu-container .list-menu-content .sub-header{
    color: #ddd;
    font-weight: bold;
    margin: 20px 0 5px;
}

.lists-menu-container .menu-scroller .lists-menu{
    list-style: none;
    padding:0;
    font-size: 13px;
}
.lists-menu > li{
    margin: 1px 0;
    padding: 5px;
    color: #fff;
}

.lists-menu > li ul.dropdown-menu{
    position: relative;
    width: 100%;
    border-radius: 1px;
}
.lists-menu > li ul.dropdown-menu li a:hover{
    width: 100%;
}
.lists-menu > li:hover, .lists-menu > li.active{
    background: #2c3b49;
}
.lists-menu > li > a{
    color: #fff;
    padding: 3px 5px 5px 0;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 78%;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
.lists-menu > li .fa{
    visibility:hidden;
}
.lists-menu > li .fa.fa-chevron-circle-down{
    margin: 6px 2px 0 0;
    cursor: pointer;
}
.lists-menu > li .fa.fa-plus-square-o{
    vertical-align: middle;
    cursor: move;
}
.lists-menu > li.active .fa, .lists-menu > li:hover .fa{
    visibility:visible;
}
.search-list{
    width: 100%;
    background-color: #2c3b49;
    border: 0;
    margin:5px 0 10px;
    color: #ccc;
    padding: 5px 10px;
}
.search-list:focus{
    color: #fff;
    outline: none;
}

.integrations-container > div,
.common-links-container > div{
    padding: 8px 5px;
}
.integrations-container > div:hover,
.common-links-container > div:hover{
    background: #2c3b49;
}
.integrations-container > div a,
.common-links-container > div a{
    color: #fff;

}
/*Search Container styles */
.search-container{
    min-height: 300px;
    position: absolute;
    z-index: 1030;
    width: 100%;
    top: 0;
    background: #fbfbfb;
    margin-left: -15px;
    margin-top: 51px;
    display: none;
    opacity: 0.96;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #f5f5f5;
}
.footer p{
    margin: 5px 0;
}

/*** Utilities ***/
.showElement{
    display: block !important;
    height: 100%;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}
.full-width{
    padding-left: 15px !important;
    width:100% !important;
}
.marginboth10px{
    margin: 10px !important;
}


/***********************************
**********Button Styles**********
***********************************/
.btn{
    font-family: open-sans;
    border-radius: 1px;
}
.module-buttons{
    margin: 4px 3px;
    border-radius: 2px;
    border: 1px solid #ddd;
    box-shadow: 0px 1px 1px #ddd;
    text-transform: uppercase;
    color: #666;
}
.module-buttons:hover, 
.module-buttons:focus, 
.module-buttons.focus, 
.module-buttons:active, 
.module-buttonst.active {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}
.help-link{
    font-size: 22px;
    margin: 10px;
}

.btn{
    text-shadow:0px 1px 0px #fff;
}

/***********************************
**********List View Styles**********
***********************************/

.module-buttons-container{
    float: right;
    margin-right: 10px;
}

.current-filter-name{
    margin-top: 10px;
    float: left;
    font-size: 16px;
}

.listViewContentHeaderValues .customsort{
    opacity:0.5;
}

#listviewheader {
    margin-top : 5px;
    margin-left:-15px
}

.listViewPageDiv a{
    text-decoration: none;
    color:inherit;
}

.listViewContentHeaderValues:hover{
    text-decoration: none;
    color: #333;
}

.listview-actions-container {
    position: relative;
    background: #fff;
    padding-top:10px;
}
/*
.listview-pagination{ 
    position: fixed;
    right: 12px;
    top: 103px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}*/

.listview-pagination i{
    font-size: 20px;
}

.listview-pagination .disabled{
    color: rgba(0, 0, 0, 0.2);
}

.listview-pagination .disabled:hover{
    cursor : default;
}

.listview-pagination p{
    float: left;
    margin: 5px;
}

.input-prepend .add-on,
.input-append .add-on{
    border :1px solid #ccc;
    padding : 3px;
}


.table-container{
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ddd;
    margin-top: 10px;
    overflow-y: auto;
    padding-top:5px;
}

.listview-table{
    margin-bottom: 0;
    border-top: 0;
    min-width: 2430px; 
    table-layout: fixed;
}
.listview-table  tr td, .listview-table tr th{
    /*border-right:1px solid #ccc;*/
    color:#999;
}
.listview-table > thead > tr > th,
.listview-table > tbody > tr > th,
.listview-table > tfoot > tr > th{
    padding: 5px;
}
.listview-table > thead > tr:first-child > th,
.listview-table > tbody > tr:first-child > th{
    padding: 10px 5px;
}
.listview-table > thead > tr > td,
.listview-table > tbody > tr > td,
.listview-table > tfoot > tr > td{
    padding: 5px;
}
.floatThead-table{
    background: #fff;
}
.inline-search-btn button{
    text-align: center;
    width: 100%;
    text-shadow: none;
    padding: 3px
}
.listview-table .table-actions{
    width: 135px;
}
.listview-table .table-actions span{
    padding: 0 5px;
}
.listview-table .table-actions span:hover{
    color: #333;
    cursor: pointer;
}
.listview-table .table-actions span.caret{
    padding: 0;
}
.listview-table .input .checkbox{
    height:16px;
    width:16px;
    float:left;	
    margin-top: 2px;
}
.listview-table tr td .input .checkbox{
    margin-right: 10px;
}
.listview-table .fa-star-o{
    font-size:16px;
}
.floatThead-wrapper .table-container{
    z-index: 0 !important;
}
/* List view bottom fixed scroll */

.bottom-fixed-scroll{
    border-top: 1px solid #ddd;
    height: 18px;
    position: relative;
    top: -19px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}
.scroller-div{
    height: 1px;
}

/* Campaigns (MARKETING) list: fix broken horizontal scroller placement/overlap */
body[data-module="Campaigns"] #listViewContent #scroller_wrapper.bottom-fixed-scroll {
    top: 0 !important;
    margin-top: 8px;
    height: 16px;
}
body[data-module="Campaigns"] #listViewContent #table-content.table-container {
    padding-bottom: 14px;
}

/* Campaigns list: tighter, more reasonable table spacing */
body[data-module="Campaigns"] #listview-table th,
body[data-module="Campaigns"] #listview-table td {
    padding: 6px 8px !important;
}
body[data-module="Campaigns"] #listview-table {
    table-layout: fixed;
}
body[data-module="Campaigns"] #listview-table td.listViewEntryValue .value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Campaigns (MARKETING) list: ensure sidebar toggle arrow sits on sidebar edge */
body[data-module="Campaigns"] #listViewContent .essentials-toggle {
    left: 296px !important; /* 56 (module-nav) + 240 (sidebar-essentials) */
    top: 87px !important;
    z-index: 5 !important;
    border-radius: 0 6px 6px 0;
}
body[data-module="Campaigns"] .content-area.full-width #listViewContent .essentials-toggle {
    left: 72px !important; /* sidebar hidden: keep near module-nav */
}
body[data-module="Campaigns"] #listViewContent .essentials-toggle .essentials-toggle-marker {
    background: none !important;
    width: 14px;
    text-align: center;
    display: inline-block;
}

/* Plans list: apply same Campaigns list usability fixes */
body[data-module="Plans"] #listViewContent #scroller_wrapper.bottom-fixed-scroll {
    top: 0 !important;
    margin-top: 8px;
    height: 16px;
}
body[data-module="Plans"] #listViewContent #table-content.table-container {
    padding-bottom: 14px;
}
body[data-module="Plans"] #listview-table th,
body[data-module="Plans"] #listview-table td {
    padding: 6px 8px !important;
}
body[data-module="Plans"] #listview-table {
    table-layout: fixed;
}
body[data-module="Plans"] #listview-table td.listViewEntryValue .value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-module="Plans"] #listViewContent .essentials-toggle {
    left: 296px !important; /* 56 (module-nav) + 240 (sidebar-essentials) */
    top: 87px !important;
    z-index: 5 !important;
    border-radius: 0 6px 6px 0;
}
body[data-module="Plans"] .content-area.full-width #listViewContent .essentials-toggle {
    left: 72px !important; /* sidebar hidden: keep near module-nav */
}
body[data-module="Plans"] #listViewContent .essentials-toggle .essentials-toggle-marker {
    background: none !important;
    width: 14px;
    text-align: center;
    display: inline-block;
}

/* Plans list: permanently keep sidebar open (no toggle) */
body[data-module="Plans"] #listViewContent .essentials-toggle {
    display: none !important;
}
body[data-module="Plans"] .main-container #sidebar-essentials.sidebar-essentials {
    display: inline-block !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}
body[data-module="Plans"] .main-container .content-area,
body[data-module="Plans"] .main-container .listViewPageDiv.content-area,
body[data-module="Plans"] .main-container #listViewContent.listViewPageDiv.content-area {
    padding-left: 296px !important; /* 56 (module-nav) + 240 (sidebar-essentials) */
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
}

/* Contacts list: fix broken horizontal scroller placement/overlap + compact table spacing */
body[data-module="Contacts"] #listViewContent #scroller_wrapper.bottom-fixed-scroll {
    top: 0 !important;
    margin-top: 8px;
    height: 16px;
}
body[data-module="Contacts"] #listViewContent #table-content.table-container {
    padding-bottom: 14px;
}
body[data-module="Contacts"] #listview-table th,
body[data-module="Contacts"] #listview-table td {
    padding: 6px 8px !important;
}
body[data-module="Contacts"] #listview-table {
    table-layout: fixed;
}
body[data-module="Contacts"] #listview-table td.listViewEntryValue .value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Contacts list: ensure sidebar toggle arrow sits on sidebar edge */
body[data-module="Contacts"] #listViewContent .essentials-toggle {
    left: 296px !important; /* 56 (module-nav) + 240 (sidebar-essentials) */
    top: 87px !important;
    z-index: 5 !important;
    border-radius: 0 6px 6px 0;
}
body[data-module="Contacts"] .content-area.full-width #listViewContent .essentials-toggle {
    left: 72px !important;
}
body[data-module="Contacts"] #listViewContent .essentials-toggle .essentials-toggle-marker {
    background: none !important;
    width: 14px;
    text-align: center;
    display: inline-block;
}

/* Plans list: horizontal scrollbar should not overlap content */
body[data-module="Plans"] #listViewContent #table-content.table-container,
.main-container-Plans #listViewContent #table-content.table-container {
    padding-bottom: 28px !important;
}
body[data-module="Plans"] #listViewContent #scroller_wrapper.bottom-fixed-scroll,
body[data-module="Plans"] #listViewContent .bottom-fixed-scroll {
    top: 0 !important;
    margin-top: 10px !important;
    height: 18px !important;
    position: relative !important;
}
/* Some templates place scroller outside #listViewContent; force-disable negative offset for Plans */
body[data-module="Plans"] #scroller_wrapper.bottom-fixed-scroll,
body[data-module="Plans"] .bottom-fixed-scroll,
.main-container-Plans #scroller_wrapper.bottom-fixed-scroll,
.main-container-Plans .bottom-fixed-scroll {
    top: 0 !important;
    position: relative !important;
}

/* ========== Detail view refresh (Project/ProjectTask) ========== */
body[data-module="Project"],
body[data-module="ProjectTask"] {
    background: #f4f7fb;
}
body[data-module="Project"] .detailViewPageDiv .block,
body[data-module="ProjectTask"] .detailViewPageDiv .block,
body[data-module="ProjectTask"] .detailViewContainer .block {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 4px 20px rgba(15, 23, 42, 0.06);
    padding: 18px 22px 12px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
body[data-module="ProjectTask"] .detailViewContainer .block:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
body[data-module="Project"] .detailViewPageDiv .block h4,
body[data-module="ProjectTask"] .detailViewPageDiv .block h4,
body[data-module="ProjectTask"] .detailViewContainer .block h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body[data-module="Project"] .detailViewPageDiv .block h4 img,
body[data-module="ProjectTask"] .detailViewPageDiv .block h4 img {
    opacity: 0.55;
}
body[data-module="Project"] .detailViewPageDiv .block hr,
body[data-module="ProjectTask"] .detailViewPageDiv .block hr,
body[data-module="ProjectTask"] .detailViewContainer .block hr {
    display: none;
}
body[data-module="Project"] .detailview-table.no-border,
body[data-module="ProjectTask"] .detailview-table.no-border {
    width: 100%;
}
body[data-module="Project"] .detailview-table.no-border tr,
body[data-module="ProjectTask"] .detailview-table.no-border tr,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table.no-border tr {
    border: none;
}
body[data-module="Project"] .detailview-table.no-border td,
body[data-module="ProjectTask"] .detailview-table.no-border td,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table.no-border td {
    border: none;
    padding: 6px 8px;
    vertical-align: middle;
}
body[data-module="Project"] .detailview-table .fieldLabel span.muted,
body[data-module="ProjectTask"] .detailview-table .fieldLabel span.muted,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table .fieldLabel span.muted {
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.01em;
}
body[data-module="Project"] .detailview-table .fieldValue .value,
body[data-module="ProjectTask"] .detailview-table .fieldValue .value,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table .fieldValue .value {
    color: #0f172a;
    font-weight: 600;
    font-size: 13px;
}
body[data-module="Project"] .detailview-table .fieldValue .value a,
body[data-module="ProjectTask"] .detailview-table .fieldValue .value a,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table .fieldValue .value a {
    color: #0284c7;
    font-weight: 600;
}
body[data-module="Project"] .detailview-table .fieldValue .value a:hover,
body[data-module="ProjectTask"] .detailview-table .fieldValue .value a:hover,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table .fieldValue .value a:hover {
    text-decoration: underline;
}
body[data-module="Project"] .detailViewPageDiv .blockData,
body[data-module="ProjectTask"] .detailViewPageDiv .blockData,
body[data-module="ProjectTask"] .detailViewContainer .blockData {
    padding-top: 8px;
}
body[data-module="Project"] .detailViewPageDiv .detailview-table .fieldValue,
body[data-module="ProjectTask"] .detailViewPageDiv .detailview-table .fieldValue,
body[data-module="ProjectTask"] .detailViewContainer .detailview-table .fieldValue {
    max-width: 420px;
    word-break: break-word;
}
body[data-module="Project"] .detailViewPageDiv,
body[data-module="ProjectTask"] .detailViewPageDiv,
body[data-module="ProjectTask"] .detailViewContainer .details.row {
    padding-top: 16px;
}

/* ========== Project Task Detail – thiết kế card, tabs, edit icons ========== */
body[data-module="ProjectTask"] .detailViewContainer {
    background: transparent !important;
    padding: 0 10px 24px !important;
}
body[data-module="ProjectTask"] .detailview-content .related-tabs {
    background: rgba(255,255,255,0.9);
    border: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
    margin: 0 -10px !important;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body[data-module="ProjectTask"] .detailview-content .related-tabs .nav-tabs {
    border-bottom: none;
}
body[data-module="ProjectTask"] .detailview-content .related-tabs .tab-item a {
    color: #64748b !important;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
body[data-module="ProjectTask"] .detailview-content .related-tabs .tab-item.active a,
body[data-module="ProjectTask"] .detailview-content .related-tabs .tab-item:hover a {
    color: #16a34a !important;
    background: rgba(34, 197, 94, 0.08);
}
body[data-module="ProjectTask"] .detailViewContainer .block .action .editAction.fa-pencil {
    color: #64748b !important;
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease;
}
body[data-module="ProjectTask"] .detailViewContainer .block .action .editAction.fa-pencil:hover {
    color: #16a34a !important;
    opacity: 1;
}
body[data-module="ProjectTask"] .detailViewContainer .block .detailview-table td {
    padding: 10px 12px !important;
}
body[data-module="ProjectTask"] #detailView {
    padding-top: 8px;
}
body[data-module="ProjectTask"] .detailViewContainer .block:first-of-type {
    border-left: 4px solid #22c55e;
}

/* ========== ProjectTask taskListPanel (Subtasks) – giống HTML mẫu ========== */
.taskListPanel {
    margin: 15px 20px 15px 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.taskListPanel .x-panel-header {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;
}
.taskListPanel .x-title {
    font-weight: 600;
    font-size: 14px;
}
.taskListPanel .tasksListToolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
}
.taskListPanel .quickAddDummyField {
    flex: 1;
}
.taskListPanel .quickAddTaskInput {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.taskListPanel .task-list-container {
    padding: 10px 15px;
    min-height: 60px;
}
.taskListPanel .task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.taskListPanel .task-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.taskListPanel .task-list-row:hover {
    background: #f1f5f9;
}
.taskListPanel .task-check-wrap {
    flex-shrink: 0;
}
.taskListPanel .task-checkbox {
    cursor: pointer;
}
.taskListPanel .task-title {
    flex: 1;
    min-width: 0;
}
.taskListPanel .task-title.task-done {
    text-decoration: line-through;
    color: #94a3b8;
}
.taskListPanel .task-duration {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
}
.taskListPanel .task-assignee-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.taskListPanel .task-assignee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    background: #0ea5e9;
    color: #fff;
    border-radius: 6px;
}
.taskListPanel .task-add-assignee {
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
}
.taskListPanel .task-list-empty {
    padding: 16px 0;
    color: #94a3b8;
    font-size: 13px;
}
.taskListPanel .subtaskListBotToolbar {
    border-top: 1px solid #f1f5f9;
}

/* ========== Project & ProjectTask Detail – Màu dịu mắt, hiệu ứng mượt ========== */
body[data-module="Project"],
body[data-module="ProjectTask"] {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 30%, #fafafa 70%, #f5f5f4 100%) !important;
}
/* Tránh breadcrumb + Add tag bị che bởi topbar/app-nav */
body[data-module="Project"] #page,
body[data-module="ProjectTask"] #page {
    padding-top: 120px !important;
}
body[data-module="Project"] .detailViewContainer .content-area,
body[data-module="ProjectTask"] .detailViewContainer .content-area {
    padding-top: 20px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}
/* ========== Project Detail: header + Add tag – thiết kế đẹp, hiện đại ========== */
body[data-module="Project"] .detailview-header-block {
    background: linear-gradient(135deg, #ffffff 0%, #faf8ff 30%, #f5f3ff 60%, #fefce8 100%) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
    border: 1px solid #e9d5ff !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.3s ease !important;
}
body[data-module="Project"] .detailview-header-block:hover {
    box-shadow: 0 8px 28px rgba(139, 92, 246, 0.12) !important;
}
body[data-module="Project"] .record-header .recordImage.bgproject {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}
body[data-module="Project"] .record-header .recordBasicInfo h4,
body[data-module="Project"] .record-header .recordLabel {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #1e1b4b !important;
}
body[data-module="Project"] .detailViewContainer .tagContainer {
    margin-top: 16px !important;
    padding: 16px 20px !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 12px !important;
    border: 1px solid #e9d5ff !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.05) !important;
}
body[data-module="Project"] #addTagContainer #addTagTriggerer.badge,
body[data-module="Project"] .tagContainer #addTagTriggerer {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.25s ease !important;
}
body[data-module="Project"] #addTagContainer #addTagTriggerer.badge:hover,
body[data-module="Project"] .tagContainer #addTagTriggerer:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4) !important;
}
body[data-module="Project"] .tagContainer .tag-contents .detailTagList .tag,
body[data-module="Project"] .tagContainer .detailTagList .tag {
    background: linear-gradient(135deg, #ede9fe 0%, #e9d5ff 100%) !important;
    color: #6d28d9 !important;
    border: 1px solid #c4b5fd !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
}
/* Related tabs (Summary, Details, Tasks, Chart) – hiện đại */
body[data-module="Project"] .detailview-content .related-tabs {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 0 4px !important;
    margin: 0 -24px 0 -24px !important;
    border: 1px solid #e9d5ff !important;
    border-bottom: none !important;
    box-shadow: 0 -2px 12px rgba(139, 92, 246, 0.04) !important;
}
body[data-module="Project"] .detailview-content .related-tabs .nav-tabs {
    border: none !important;
}
body[data-module="Project"] .detailview-content .related-tabs .tab-item a {
    color: #64748b !important;
    font-weight: 500 !important;
    padding: 14px 20px !important;
    border-radius: 10px 10px 0 0 !important;
    transition: all 0.2s ease !important;
}
body[data-module="Project"] .detailview-content .related-tabs .tab-item.active a,
body[data-module="Project"] .detailview-content .related-tabs .tab-item:hover a {
    color: #7c3aed !important;
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
}
/* Khung nội dung chi tiết – card sáng, viền mềm */
body[data-module="Project"] .detailview-content .details.row {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #e9d5ff !important;
    border-radius: 0 0 12px 12px !important;
    padding: 28px 24px !important;
    margin-top: 0 !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.06) !important;
    min-height: 200px !important;
}
body[data-module="Project"] .detailview-content.container-fluid,
body[data-module="ProjectTask"] .detailview-content.container-fluid {
    margin-top: 48px !important;
    padding-top: 40px !important;
    padding: 40px 20px 300px 20px !important;
}
/* Key Metrics – card pastel dịu mắt + fade-in */
body[data-module="Project"] .summaryView .summaryViewHeader h4,
body[data-module="ProjectTask"] .summaryView .summaryViewHeader h4,
body[data-module="Project"] .summaryWidgetContainer .widget_header h4,
body[data-module="ProjectTask"] .summaryWidgetContainer .widget_header h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    color: #475569 !important;
    margin: 0 !important;
}
body[data-module="Project"] .summaryView,
body[data-module="ProjectTask"] .summaryView {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
body[data-module="Project"] .summaryView:hover,
body[data-module="ProjectTask"] .summaryView:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3 {
    padding: 6px !important;
}
body[data-module="Project"] .summaryView .summaryViewFields .well,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .well {
    min-height: 100px !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body[data-module="Project"] .summaryView .summaryViewFields .well:hover,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .well:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}
/* Key Metrics – mỗi card một màu pastel */
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(1) .well {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
}
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(1) .well {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(1) .well .font-x-small { color: #1d4ed8 !important; }
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(1) .well .font-x-small { color: #15803d !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(1) .well .font-x-x-large { color: #1e40af !important; }
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(1) .well .font-x-x-large { color: #166534 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(2) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(2) .well {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(2) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(2) .well .font-x-small { color: #047857 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(2) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(2) .well .font-x-x-large { color: #065f46 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(3) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(3) .well {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(3) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(3) .well .font-x-small { color: #b45309 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(3) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(3) .well .font-x-x-large { color: #073B3A !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(4) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(4) .well {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(4) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(4) .well .font-x-small { color: #0e7490 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(4) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(4) .well .font-x-x-large { color: #155e75 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(5) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(5) .well {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(5) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(5) .well .font-x-small { color: #be185d !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(5) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(5) .well .font-x-x-large { color: #9d174d !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(6) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(6) .well {
    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(6) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(6) .well .font-x-small { color: #7c3aed !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(6) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(6) .well .font-x-x-large { color: #6d28d9 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(7) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(7) .well {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(7) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(7) .well .font-x-small { color: #4338ca !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(7) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(7) .well .font-x-x-large { color: #3730a3 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(8) .well,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(8) .well {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(8) .well .font-x-small,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(8) .well .font-x-small { color: #b45309 !important; }
body[data-module="Project"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(8) .well .font-x-x-large,
body[data-module="ProjectTask"] .summaryView:first-of-type .summaryViewFields .row .col-lg-3:nth-child(8) .well .font-x-x-large { color: #073B3A !important; }
/* Key Fields – tông xám dịu */
body[data-module="Project"] .summaryView .summaryViewFields .detailview-table .fieldLabel,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .detailview-table .fieldLabel,
body[data-module="Project"] .summaryView .summaryViewFields .detailview-table .fieldValue,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .detailview-table .fieldValue,
body[data-module="Project"] .summaryView .summaryViewFields .summary-table .fieldLabel,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .summary-table .fieldLabel,
body[data-module="Project"] .summaryView .summaryViewFields .summary-table .fieldValue,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .summary-table .fieldValue {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
body[data-module="Project"] .summaryView .summaryViewFields .detailview-table .fieldValue .value,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .detailview-table .fieldValue .value,
body[data-module="Project"] .summaryView .summaryViewFields .summary-table .fieldValue .value,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .summary-table .fieldValue .value {
    color: #334155 !important;
    font-weight: 500 !important;
}
body[data-module="Project"] .summaryView .summaryViewFields .summary-table .fieldLabel .muted,
body[data-module="ProjectTask"] .summaryView .summaryViewFields .summary-table .fieldLabel .muted {
    color: #64748b !important;
    font-weight: 500 !important;
}
/* Widget containers – card mềm + hiệu ứng mượt */
body[data-module="Project"] .summaryWidgetContainer,
body[data-module="ProjectTask"] .summaryWidgetContainer {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body[data-module="Project"] .summaryWidgetContainer:hover,
body[data-module="ProjectTask"] .summaryWidgetContainer:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}
body[data-module="Project"] .summaryWidgetContainer .widget_header,
body[data-module="ProjectTask"] .summaryWidgetContainer .widget_header {
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 14px !important;
}
/* Khoảng cách giữa widget_filter (Select Status) và widget_contents */
body[data-module="Project"] .summaryWidgetContainer .widget_filter,
body[data-module="ProjectTask"] .summaryWidgetContainer .widget_filter {
    margin-bottom: 20px !important;
}
body[data-module="Project"] .summaryWidgetContainer .widget_header h4,
body[data-module="ProjectTask"] .summaryWidgetContainer .widget_header h4 {
    color: #475569 !important;
}
/* Nút Add – tông xanh dương dịu */
body[data-module="Project"] .summaryWidgetContainer .addButton,
body[data-module="ProjectTask"] .summaryWidgetContainer .addButton,
body[data-module="Project"] .summaryWidgetContainer .btn.addButton,
body[data-module="ProjectTask"] .summaryWidgetContainer .btn.addButton,
body[data-module="Project"] .summaryWidgetContainer .createRecord,
body[data-module="ProjectTask"] .summaryWidgetContainer .createRecord {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
    transition: all 0.3s ease !important;
}
body[data-module="Project"] .summaryWidgetContainer .addButton:hover,
body[data-module="ProjectTask"] .summaryWidgetContainer .addButton:hover,
body[data-module="Project"] .summaryWidgetContainer .btn.addButton:hover,
body[data-module="ProjectTask"] .summaryWidgetContainer .btn.addButton:hover,
body[data-module="Project"] .summaryWidgetContainer .createRecord:hover,
body[data-module="ProjectTask"] .summaryWidgetContainer .createRecord:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
    transform: translateY(-1px);
}
/* Dropdown New Document */
body[data-module="Project"] .summaryWidgetContainer .dropdown .btn-default,
body[data-module="ProjectTask"] .summaryWidgetContainer .dropdown .btn-default {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}
body[data-module="Project"] .summaryWidgetContainer .dropdown .btn-default:hover,
body[data-module="ProjectTask"] .summaryWidgetContainer .dropdown .btn-default:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #fff !important;
}
/* Select2 trong widgets */
body[data-module="Project"] .summaryWidgetContainer .select2-container .select2-selection,
body[data-module="ProjectTask"] .summaryWidgetContainer .select2-container .select2-selection {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    transition: border-color 0.2s ease !important;
}
body[data-module="Project"] .summaryWidgetContainer .select2-container--default .select2-selection--single .select2-selection__rendered,
body[data-module="ProjectTask"] .summaryWidgetContainer .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #334155 !important;
}
/* Nút Post (Comments) – xanh lá dịu */
body[data-module="Project"] .summaryWidgetContainer .btn-success,
body[data-module="ProjectTask"] .summaryWidgetContainer .btn-success,
body[data-module="Project"] .summaryWidgetContainer .commentContainer .btn-success,
body[data-module="ProjectTask"] .summaryWidgetContainer .commentContainer .btn-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
body[data-module="Project"] .summaryWidgetContainer .btn-success:hover,
body[data-module="ProjectTask"] .summaryWidgetContainer .btn-success:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
/* Comment textarea */
body[data-module="Project"] .summaryWidgetContainer .commentContainer textarea,
body[data-module="ProjectTask"] .summaryWidgetContainer .commentContainer textarea,
body[data-module="Project"] .summaryWidgetContainer textarea.form-control,
body[data-module="ProjectTask"] .summaryWidgetContainer textarea.form-control {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body[data-module="Project"] .summaryWidgetContainer textarea.form-control:focus,
body[data-module="ProjectTask"] .summaryWidgetContainer textarea.form-control:focus {
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15) !important;
}
/* Empty state – dịu mắt */
body[data-module="Project"] .summaryWidgetContainer .noContent,
body[data-module="ProjectTask"] .summaryWidgetContainer .noContent,
body[data-module="Project"] .summaryWidgetContainer .noCommentsMsgContainer,
body[data-module="ProjectTask"] .summaryWidgetContainer .noCommentsMsgContainer,
body[data-module="Project"] .summaryWidgetContainer .noRelatedRecords,
body[data-module="ProjectTask"] .summaryWidgetContainer .noRelatedRecords {
    padding: 28px !important;
    text-align: center;
    color: #94a3b8 !important;
    font-size: 14px;
    font-weight: 400;
}
body[data-module="Project"] .left-block,
body[data-module="ProjectTask"] .left-block,
body[data-module="Project"] .middle-block,
body[data-module="ProjectTask"] .middle-block,
body[data-module="Project"] .right-block,
body[data-module="ProjectTask"] .right-block {
    padding: 0 10px;
}
/* Detail header – icon + tên project – tông dịu */
body[data-module="Project"] .recordImage.bgproject,
body[data-module="ProjectTask"] .recordImage.bg_ProjectTask {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
body[data-module="Project"] .recordBasicInfo h4 .recordLabel,
body[data-module="ProjectTask"] .recordBasicInfo h4 .recordLabel {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* ========== Main Page (Management) – màu sắc & hiệu ứng hiện đại ========== */
body[data-view="MainPage"],
body.mainpage {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 25%, #f5f7ff 50%, #eef2ff 75%, #f8fafc 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* MANAGEMENT app: ensure TaskManagement overlay (#overlayPage) is above any page layers */
body[data-app="MANAGEMENT"] #overlayPageContent {
    z-index: 100000 !important;
}
body[data-app="MANAGEMENT"] #overlayPage {
    z-index: 100010 !important;
}

/* Calendar: event detail side panel (placement = right|left only in Calendar.js) */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side {
    z-index: 100050 !important;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    max-width: min(420px, calc(100vw - 24px));
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .webui-popover-inner,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .webui-popover-inner {
    padding: 10px 12px 12px;
}
/* Title moved into custom header; hide plugin title if present */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .webui-popover-title,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .webui-popover-title {
    display: none !important;
}
/* Single internal scroll: content only (full detail HTML preserved) */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .webui-popover-content,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .webui-popover-content {
    max-height: min(72vh, 680px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Close button polish */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side a.close,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side a.close {
    top: 10px !important;
    right: 10px !important;
    font-size: 18px !important;
    opacity: 0.7 !important;
    text-decoration: none !important;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side a.close:hover,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side a.close:hover {
    opacity: 1 !important;
}

/* Card layout */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-popover-card,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-popover-card {
    color: #0f172a;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-popover-header,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    margin-bottom: 10px;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-title,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
    line-height: 1.25;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-submeta,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-submeta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-chip,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.85);
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.2;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-chip--status,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-chip--status {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.18);
    color: #2563eb;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-actions,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-actions {
    display: inline-flex;
    gap: 6px;
    padding-top: 2px;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-action,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-action {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.9);
    color: rgba(15, 23, 42, 0.78) !important;
    text-decoration: none !important;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-action:hover,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-action:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a !important;
}

/* Details section titles + rows */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-section-title,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
    margin: 0 0 6px;
}

/* Footer */
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-footer,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-open,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 12.5px;
    color: #2563eb !important;
    text-decoration: none !important;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .bace-cal-open:hover,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .bace-cal-open:hover {
    text-decoration: underline !important;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .calendar-activity-popover,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .calendar-activity-popover {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .calendar-activity-row,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .calendar-activity-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin: 4px 0;
    line-height: 1.35;
}
body[data-module="Calendar"] .webui-popover.webui-popover-bace-calendar-side .calendar-activity-row .text-muted,
body:has(.CalendarViewPageDiv) .webui-popover.webui-popover-bace-calendar-side .calendar-activity-row .text-muted {
    flex: 0 0 auto;
    min-width: 92px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.60);
}

/* ========== B-ACE: Users Preference Detail (User Management > Users > Detail) ========== */
.bace-users-pref-detail #prefPageHeader {
    margin: 12px 0 18px;
}
.bace-users-pref-detail #prefPageHeader > .col-lg-12 {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    padding: 14px 14px 10px;
}
.bace-users-pref-detail #prefPageHeader .logo.col-xs-2 {
    width: 86px;
    height: 86px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bace-users-pref-detail #prefPageHeader .logo.col-xs-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bace-users-pref-detail #myPrefHeading h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
}
.bace-users-pref-detail #prefPageHeader .col-xs-9 > span {
    display: block;
    color: #475569;
    font-size: 12.5px;
}
.bace-users-pref-detail #prefPageHeader .detailViewButtoncontainer .btn {
    border-radius: 10px;
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.9);
}
.bace-users-pref-detail #prefPageHeader .detailViewButtoncontainer .btn:hover {
    background: rgba(15, 23, 42, 0.04);
}
.bace-users-pref-detail .detailViewInfo.userPreferences {
    margin-top: 12px;
}

/* Section cards (blocks) */
.bace-users-pref-detail .detailViewInfo.userPreferences .details {
    padding: 0;
}
.bace-users-pref-detail .detailViewInfo.userPreferences .block {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    margin: 12px 0;
    overflow: hidden;
}
.bace-users-pref-detail .detailViewInfo.userPreferences .blockHeader {
    background: rgba(248, 250, 252, 0.85);
    border-bottom: 1px solid rgba(148, 163, 184, 0.30);
    padding: 12px 14px;
    font-weight: 800;
    color: #0f172a;
}
.bace-users-pref-detail .detailViewInfo.userPreferences table {
    margin: 0;
}

/* Field grid readability */
.bace-users-pref-detail td.fieldLabel {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    vertical-align: top;
    padding-top: 10px !important;
}
.bace-users-pref-detail td.fieldValue {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    padding-top: 10px !important;
}
.bace-users-pref-detail tr {
    border-bottom: 1px dashed rgba(148, 163, 184, 0.25);
}
.bace-users-pref-detail tr:last-child {
    border-bottom: 0;
}

/* ========== B-ACE: Settings Users Detail (Settings > User Management > Users > Detail) ========== */
.bace-users-settings-detail #userPageHeader {
    margin: 12px 0 16px;
}
.bace-users-settings-detail #userPageHeader {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    padding: 12px 14px;
}
.bace-users-settings-detail #userPageHeader .recordImage {
    width: 86px !important;
    height: 86px !important;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.bace-users-settings-detail #userPageHeader .recordImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bace-users-settings-detail #userPageHeader .recordImage .name {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.10);
    color: #4f46e5;
    border-radius: 18px;
}
.bace-users-settings-detail #userPageHeader .font-x-x-large {
    margin: 0 0 0 10px !important;
    font-size: 20px !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 110px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bace-users-settings-detail #userPageHeader .detailViewButtoncontainer .btn {
    border-radius: 10px;
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.9);
}
.bace-users-settings-detail #userPageHeader .detailViewButtoncontainer .btn:hover {
    background: rgba(15, 23, 42, 0.04);
}

/* Section cards + field grid (same language as Task Board / B-ACE) */
.bace-users-settings-detail .detailview-content.userPreferences {
    padding-left: 0;
    padding-right: 0;
}
.bace-users-settings-detail .detailview-content.userPreferences .details {
    padding: 0;
}
.bace-users-settings-detail .detailview-content.userPreferences .block {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    margin: 12px 0;
    overflow: hidden;
}
.bace-users-settings-detail .detailview-content.userPreferences .block > div > h4 {
    margin: 0;
    padding: 12px 14px;
    background: rgba(248, 250, 252, 0.85);
    border-bottom: 1px solid rgba(148, 163, 184, 0.30);
    font-weight: 800;
    color: #0f172a;
    font-size: 14px;
}
.bace-users-settings-detail .detailview-content.userPreferences .block > hr {
    display: none;
}
.bace-users-settings-detail .detailview-content.userPreferences .blockData {
    padding: 8px 14px 12px;
}
.bace-users-settings-detail .detailview-content.userPreferences table {
    margin: 0;
}
.bace-users-settings-detail td.fieldLabel {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    vertical-align: top;
    padding-top: 10px !important;
}
.bace-users-settings-detail td.fieldValue {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    padding-top: 10px !important;
}
.bace-users-settings-detail .detailview-content.userPreferences tr {
    border-bottom: 1px dashed rgba(148, 163, 184, 0.25);
}
.bace-users-settings-detail .detailview-content.userPreferences tr:last-child {
    border-bottom: 0;
}

/* Calendar Task Management — full page (MANAGEMENT direct route): not overlay modal */
.task-management-page.panel {
    max-width: 1280px;
    margin: 14px auto 28px;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, #ffffff 28%);
}
.task-management-page .overlayHeader {
    padding: 12px 16px 8px;
}
.task-management-page .modal-body.overflowYAuto {
    padding: 0 12px 18px;
    max-width: 100%;
}

/* Header / toolbar cohesion */
.task-management-page .task-mgmt-fullpage-header {
    border-bottom: 0;
    padding: 10px 4px 8px;
}
.task-management-page .task-mgmt-fullpage-header h4 {
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #0f172a;
}
.task-management-page .task-mgmt-fullpage-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.40);
    opacity: 1;
}
.task-management-page .task-mgmt-fullpage-close:hover {
    background: rgba(15, 23, 42, 0.10);
}

/* Toolbar card */
.task-management-page .data-header {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.task-management-page .data-header .btn-group.dateFilters .btn {
    border-radius: 999px !important;
    border-color: rgba(148, 163, 184, 0.45);
}
.task-management-page .data-header .btn-group.dateFilters .btn.active {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.35);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}
.task-management-page .data-header .otherFilters .btn-success.search {
    border-radius: 10px;
    height: 34px;
    padding: 6px 10px;
}
.task-management-page .task-mgmt-filters {
    width: auto !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
}
@media (max-width: 1199px) {
    .task-management-page .task-mgmt-filters {
        float: none !important;
        width: 100% !important;
        margin-top: 12px;
    }
    .task-management-page .data-header .dateFilters {
        float: none !important;
    }
}
.task-management-page .task-mgmt-column-scroll {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Board layout */
.task-management-page .data-body.row {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 14px 0 0;
}
.task-management-page .data-body.row > .contentsBlock {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
}
@media (max-width: 1199px) {
    .task-management-page .data-body.row {
        flex-wrap: wrap;
    }
    .task-management-page .data-body.row > .contentsBlock {
        flex: 1 1 320px;
    }
}

/* Lane (priority column) styling */
.task-management-page .contentsBlock .title {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.task-management-page .contentsBlock .content {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 14px;
    padding: 10px 10px 12px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}
.task-management-page .contentsBlock .input-group .form-control {
    height: 36px;
    border-radius: 12px;
    border-color: rgba(148, 163, 184, 0.45);
}
.task-management-page .contentsBlock .input-group .input-group-addon {
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(148, 163, 184, 0.45);
}

/* Task cards */
.task-management-page .task-card-wrap {
    margin: 8px 0;
}
.task-management-page .task-card {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    padding: 10px 10px 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.task-management-page .task-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    border-color: rgba(100, 116, 139, 0.45);
}
.task-management-page .task-card .taskSubject {
    font-weight: 700;
    color: #0f172a;
}
.task-management-page .task-card .taskSubject a {
    color: inherit;
}
.task-management-page .task-card .taskStatus {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.task-management-page .task-card .other-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
}
.task-management-page .task-card .task-details {
    font-size: 12.5px;
    color: rgba(15, 23, 42, 0.78);
}
.task-management-page .task-card .task-actions a {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.task-management-page .task-card .task-actions a:hover {
    background: rgba(15, 23, 42, 0.08);
}

/* Make scroll area feel like a lane */
.task-management-page .task-mgmt-column-scroll.scrollable {
    border-radius: 12px;
    padding: 6px;
    background: rgba(241, 245, 249, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.mainpage-wrap {
    padding: 12px 24px 24px;
    margin-top: 0;
}
@keyframes mainpage-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.mainpage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-auto-rows: minmax(140px, auto);
    gap: 18px;
}
.mainpage-grid .mainpage-card {
    animation: mainpage-card-in 0.4s ease-out backwards;
}
.mainpage-grid .area-ann { animation-delay: 0.05s; }
.mainpage-grid .area-shortcuts { animation-delay: 0.1s; }
.mainpage-grid .area-projects { animation-delay: 0.15s; }
.mainpage-grid .area-agenda { animation-delay: 0.2s; }
.mainpage-grid .area-tasks { animation-delay: 0.25s; }
.mainpage-grid .area-time { animation-delay: 0.3s; }
@media (min-width: 1200px) {
    .mainpage-grid {
        grid-template-columns: 1fr 1fr;
        /* Tất cả các hàng cùng chiều cao */
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
            "ann short"
            "proj agenda"
            "tasks time";
        align-items: stretch;
        min-height: 0;
        /* Chiều cao tối thiểu để 3 hàng chia đều */
        min-height: 540px;
    }
    .area-ann { grid-area: ann; }
    .area-shortcuts { grid-area: short; }
    .area-projects { grid-area: proj; }
    .area-agenda { grid-area: agenda; }
    .area-time { grid-area: time; }
    /* Card lấp đầy ô, nội dung cuộn bên trong */
    .mainpage-grid .mainpage-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .mainpage-grid .mainpage-card .card-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
}
.main-container .content-area[data-view="MainPage"],
body[data-module="Home"][data-view="MainPage"] .content-area {
    padding-top: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Main Page - Banner TDB SOLUTION (căn giữa) */
.mainpage-banner {
    margin: 0 auto 14px;
    max-width: 1200px;
    display: flex;
    justify-content: center;
}

/* Dashboard: keep MainPage banner look, only center + spacing */
.dashBoardContainer > .mainpage-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px auto 16px !important;
}

/* Dashboard: open up gridster width (avoid boxed/centered widget area) */
.dashBoardContainer .dashBoardTabContents [class^="gridster_"] > ul {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mainpage-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(10px);
}

.mainpage-banner-logo {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #f9fafb;
    background: radial-gradient(circle at 30% 0%, #e0f2fe, transparent 55%),
                linear-gradient(135deg, #4f46e5 0%, #0ea5e9 45%, #22c55e 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.6);
}

.mainpage-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mainpage-banner-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f172a;
}

.mainpage-banner-subtitle {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b7280;
}
.mainpage-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 22px;
    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(148, 163, 184, 0.35);
    padding: 16px 18px 14px;
    margin-bottom: 0;
    transition: box-shadow 0.3s ease, transform 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}
.mainpage-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 18px 0 0 18px;
    opacity: 0.9;
}
.mainpage-card:hover {
    box-shadow:
        0 26px 52px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(148, 163, 184, 0.55);
    transform: translateY(-2px);
    border-color: rgba(148, 163, 184, 0.4);
}
.area-ann.mainpage-card::before { background: linear-gradient(180deg, #08A045, #0B6E4F); }
.area-shortcuts.mainpage-card::before { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.area-projects.mainpage-card::before { background: linear-gradient(180deg, #10b981, #059669); }
.area-agenda.mainpage-card::before { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }
.area-tasks.mainpage-card::before { background: linear-gradient(180deg, #ec4899, #db2777); }
.area-time.mainpage-card::before { background: linear-gradient(180deg, #06b6d4, #0891b2); }
.mainpage-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mainpage-card .title {
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}
.mainpage-card .title .fa {
    transition: transform 0.25s ease;
}
.mainpage-card:hover .title .fa {
    transform: scale(1.08);
}
.area-ann .title .fa { color: #0B6E4F; }
.area-shortcuts .title .fa { color: #2563eb; }
.area-projects .title .fa { color: #059669; }
.area-agenda .title .fa { color: #7c3aed; }
.area-tasks .title .fa { color: #db2777; }
.area-time .title .fa { color: #0891b2; }
.area-time-demo.mainpage-card::before { background: linear-gradient(180deg, #06b6d4, #0891b2); }
.mainpage-card .card-header.subtle {
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding-bottom: 8px;
}
.mainpage-card .card-body {
    padding: 6px 0;
}

/* Main Page: tăng chữ nhẹ (KHÔNG tăng kích thước ô/card) */
.mainpage-card { font-size: 14px; }
.mainpage-card .title { font-size: 16px; }
.mainpage-table thead th { font-size: 12px; }
.mainpage-table tbody td { font-size: 13px; }
.shortcuts-grid .shortcut { font-size: 14px; }
.ann-item-title { font-size: 14px; }
.ann-item-time { font-size: 12px; }
.agenda .tab-group { font-size: 13px; }
.agenda-item .title { font-size: 14px; }
.status-pill { font-size: 12px; }
.login-history-item { font-size: 13px; }

/* =========================
   Main Page - Global filter (Management)
   ========================= */
.mainpage-global-filter {
    margin-bottom: 14px;
}

.mainpage-global-filter-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.mainpage-global-filter-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0f172a;
    margin-right: 6px;
}

.mainpage-global-filter-title .fa {
    margin-right: 4px;
}

.mainpage-global-filter-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin: 0;
}

.mainpage-global-filter-select,
.mainpage-global-filter-date {
    min-width: 140px;
    max-width: 210px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    padding: 0 12px;
    font-size: 12px;
    line-height: 26px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

.mainpage-global-filter-date {
    min-width: 130px;
}

.mainpage-global-filter-select:focus,
.mainpage-global-filter-date:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.9);
}

.mainpage-global-filter-btn {
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
}

/* =========================
   Main Page - Agenda card (modern)
   Nội dung lấp đầy ô: panel + list giãn hết, list cuộn bên trong.
   ========================= */
.mainpage-card.area-agenda {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.mainpage-card.area-agenda .card-header.subtle {
    padding-bottom: 10px;
    border-bottom-color: rgba(226, 232, 240, 0.9);
}
.mainpage-card.area-agenda .card-body {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}
/* Panel hiện tại (Today/Upcoming) chiếm hết phần còn lại của ô */
.mainpage-card.area-agenda .card-body .agenda-panel:not(.hide) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Danh sách lịch lấp đầy và cuộn bên trong → hết chỗ trống */
.mainpage-card.area-agenda .agenda-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    padding: 2px 12px;
    background: #fff;
}
.mainpage-card.area-agenda .card-body .agenda-panel .btn-default.btn-xs {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 15px !important;
    padding: 10px 16px;
    font-weight: 600;
}
/* Khi không có lịch: khối empty giãn ra giữa ô cho đỡ trống */
.mainpage-card.area-agenda .agenda-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 16px 8px;
    text-align: center;
    color: #64748b;
}

/* =========================
   Main Page - Team Status (future dashboard)
   ========================= */
.mainpage-card.area-time .card-body.time-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-status-leave-block {
    background: linear-gradient(135deg, #dcfce7 0%, #ecfdf3 40%, #fefce8 100%);
    border-radius: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 8px 18px rgba(251, 191, 36, 0.25);
}

.team-status-leave-block-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #073B3A;
    margin-bottom: 6px;
}

.team-status-list,
.team-status-list-leave {
    margin: 0;
    padding: 0;
}

.team-status-list-wrap {
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.team-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 999px;
    margin-bottom: 4px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.team-status-item:hover {
    background: rgba(148, 163, 184, 0.12);
    transform: translateY(-1px);
}

.team-status-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: #e5f2ff;
}

.team-status-name {
    flex: 1;
    font-size: 13px;
}

.team-status-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.team-status-badge.status-online,
.team-status-item.team-status-online .team-status-badge {
    background: #dcfce7;
    color: #166534;
}

.team-status-badge.status-offline,
.team-status-item.team-status-offline .team-status-badge {
    background: #e5e7eb;
    color: #4b5563;
}

.team-status-badge.status-leave,
.team-status-item.team-status-leave .team-status-badge {
    background: #dcfce7;
    color: #073B3A;
}

.team-status-leave-note {
    font-size: 11px;
}

.team-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.team-status-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.team-status-legend-item .fa {
    font-size: 8px;
}

.status-online { color: #22c55e; }
.status-offline { color: #9ca3af; }
.status-leave { color: #08A045; }

/* =========================
   Main Page - KPI card + charts
   ========================= */
.mainpage-card.area-kpi .card-body.kpi-body {
    padding-top: 6px;
}

.kpi-chart-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f172a;
    margin-bottom: 8px;
}

.kpi-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.kpi-bar-label {
    flex: 0 0 42%;
    color: #64748b;
}

.kpi-bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-bar {
    height: 8px;
    border-radius: 999px;
    background: #6366f1;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.45);
}

.kpi-bar-val {
    font-size: 11px;
    color: #0f172a;
    font-weight: 600;
}

.kpi-bar-vertical {
    width: 12px;
    border-radius: 999px;
    background: #6366f1;
    box-shadow: 0 6px 12px rgba(99, 102, 241, 0.45);
}

.kpi-bar-vertical-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.kpi-bar-chart.kpi-bar-vertical {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-around;
}

.kpi-bar-row-vertical {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kpi-bar-row-vertical .kpi-bar-label {
    flex: 0 0 auto;
    max-width: 90px;
    text-align: center;
    font-size: 11px;
    line-height: 1.25;
    color: #64748b;
}

.kpi-pie-chart {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 6px auto 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
    position: relative;
}

.kpi-pie-chart.kpi-donut::after {
    content: "";
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background: #f8fafc;
}

.kpi-pie-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: center;
    font-size: 11px;
}

.kpi-pie-legend-item i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 4px;
}

.kpi-line-chart svg {
    width: 100%;
    height: 120px;
}

.kpi-line-legend {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
}

.kpi-line-legend-item i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 4px;
}

.kpi-stacked-chart {
    margin-top: 4px;
}

.kpi-stacked-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25);
}

.kpi-stacked-seg {
    height: 100%;
}

.kpi-stacked-legend {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
}

.kpi-stacked-legend-item i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 4px;
}
.mainpage-card.area-agenda .tab-group {
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    padding: 6px;
    gap: 4px;
}
.mainpage-card.area-agenda .tab {
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    color: #475569;
    line-height: 1;
}
.mainpage-card.area-agenda .tab.active {
    background: #ffffff;
    color: #4c1d95;
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.18);
}
.mainpage-card.area-agenda .tab:hover {
    transform: none;
    background: rgba(139, 92, 246, 0.10);
    color: #5b21b6;
}
.mainpage-card.area-agenda .agenda-list {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    padding: 2px 12px;
    background: #fff;
}
.mainpage-card.area-agenda .agenda-item {
    padding: 12px 0 12px 14px;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.9);
}
.mainpage-card.area-agenda .agenda-item:hover {
    background: transparent;
}
.mainpage-card.area-agenda .agenda-item:last-child {
    border-bottom: none;
}
.mainpage-card.area-agenda .agenda-item .dot {
    width: 10px;
    height: 10px;
    margin-top: 2px;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.10);
}
.mainpage-card.area-agenda .agenda-item-row .agenda-date,
.mainpage-card.area-agenda .agenda-item-row .agenda-time {
    color: #64748b;
    font-weight: 500;
}
.mainpage-card.area-agenda .agenda-item .label {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    background: rgba(241, 245, 249, 0.8);
    color: #334155;
    font-weight: 700;
}
.mainpage-card.area-agenda .agenda-item .title {
    font-weight: 800;
    letter-spacing: 0.01em;
}
.mainpage-card.area-agenda .btn-outline-primary {
    border-color: rgba(139, 92, 246, 0.35);
    color: #5b21b6;
    background: rgba(237, 233, 254, 0.45);
}
.mainpage-card.area-agenda .btn-outline-primary:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-color: #6d28d9;
    color: #fff;
}
.announcements .card-body {
    background: linear-gradient(135deg, #ecfdf3 0%, #dcfce7 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    min-height: 140px;
    padding: 12px 14px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.announcements .ann-item {
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.announcements .ann-meta {
    font-size: 12px;
}
.announcements .ann-empty {
    margin-top: 6px;
}
/* List style like image: yellow background, teal border, time badge */
.ann-list-wrap {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-left: 3px solid #0d9488;
    border-bottom: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 0 0 6px 6px;
}
.announcements-list {
    margin: 0;
    padding: 0;
}
.announcement-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    list-style: none;
}
.announcement-item:last-child {
    border-bottom: none;
}
.ann-item-clickable {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ann-item-clickable:hover {
    background: rgba(254, 249, 195, 0.5);
}
.ann-item-title {
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    min-width: 0;
}
.ann-item-time {
    flex-shrink: 0;
    background: #fef08a;
    color: #854d0e;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.announcement-title {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
}
.announcement-desc {
    margin-bottom: 4px;
    line-height: 1.45;
}
.announcement-meta {
    font-size: 11px;
    color: #64748b;
}
/* Add button purple */
.area-ann .btn-primary.btn-xs,
.area-ann #mainpage-announcement-add {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-color: #6d28d9;
    color: #fff;
}
.area-ann #mainpage-announcement-add:hover {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
    color: #fff;
}
/* ========== Add Announcement Modal — Asana/clean (see AnnouncementMkView.css) ========== */
.ann-add-modal .modal-dialog.ann-add-modal-dialog {
    max-width: 640px;
    border-radius: 16px;
}
.ann-add-modal .modal-content.ann-add-modal-content {
    border: none;
    border-radius: 16px;
}
.ann-add-modal .modal-header.ann-add-modal-header {
    background: #fff;
    color: #0f172a;
    border: none;
    border-bottom: 1px solid #eef2f7;
    padding: 22px 24px 16px;
    position: relative;
}
.ann-add-modal .modal-header .modal-title {
    font-weight: 800;
    font-size: 1.35rem;
    display: block;
    color: #0f172a;
}
.ann-add-modal .modal-header .modal-title .fa-bullhorn {
    display: none;
}
.ann-add-modal .modal-header .ann-add-close {
    color: #64748b;
    opacity: 1;
    text-shadow: none;
    position: static;
    right: auto;
    top: auto;
    transform: none;
    font-size: 1.5rem;
}
.ann-add-modal .modal-header .ann-add-close:hover {
    opacity: 1;
    color: #0f172a;
}
.ann-add-modal .modal-body.ann-add-modal-body {
    background: #fff;
    padding: 18px 24px 8px;
}
.ann-add-form .ann-form-group {
    margin-bottom: 22px;
}
.ann-add-form .ann-label {
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
    font-size: 1.05rem;
}
.ann-add-form .ann-input {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ann-add-form .ann-input::placeholder {
    color: #94a3b8;
}
.ann-add-form .ann-input:focus {
    border-color: #0d9488;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* Ô nội dung: to, đẹp, dễ gõ */
.ann-add-form .ann-form-group .ann-textarea,
.ann-add-form .ann-description-wrap {
    margin-top: 4px;
}
.ann-add-form .ann-textarea {
    min-height: 200px;
    resize: vertical;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.6;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ann-add-form .ann-textarea:focus {
    border-color: #0d9488;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
/* CKEditor khi dùng cho ann-description */
#mainpage-announcement-modal .cke_contents {
    min-height: 200px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 14px 16px !important;
}
#mainpage-announcement-modal .cke_inner { border-radius: 12px; }
#mainpage-announcement-modal .cke_top {
    border-radius: 12px 12px 0 0;
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.ann-add-form .ann-hint {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
}
.ann-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-end;
}
.ann-add-form .ann-form-group-inline {
    flex: 1;
    min-width: 160px;
}
.ann-add-form .ann-select {
    cursor: pointer;
}
.ann-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding-bottom: 6px;
}
.ann-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #475569;
    font-weight: 500;
}
.ann-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #0d9488;
    cursor: pointer;
}
.ann-add-modal .modal-footer.ann-add-modal-footer {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 20px 28px;
    border-radius: 0 0 16px 16px;
}
.ann-add-modal .ann-btn-cancel {
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 16px;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-weight: 500;
}
.ann-add-modal .ann-btn-cancel:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}
.ann-add-modal .ann-btn-submit {
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25);
}
.ann-add-modal .ann-btn-submit:hover {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}
/* Select2 inside Add modal - to hơn */
#mainpage-announcement-modal .select2-container--default .select2-selection--multiple {
    border-radius: 12px;
    border-color: #e2e8f0;
    min-height: 50px;
    padding: 6px 10px;
}
#mainpage-announcement-modal .select2-container--default .select2-selection__choice {
    font-size: 15px;
    padding: 4px 10px;
}
#mainpage-announcement-modal .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
#mainpage-announcement-modal .select2-container--default .select2-results__option--highlighted {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
    color: #0f172a;
}
#mainpage-announcement-modal .select2-container--default .select2-results__option[aria-selected=true] {
    background: #e0f2fe;
}

/* Subscribers: one field, G = group (gray), initial = user (red) */
.ann-sub-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ann-sub-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.ann-sub-circle-group {
    background: #94a3b8;
    color: #fff;
}
.ann-sub-circle-user {
    background: #dc2626;
    color: #fff;
}
#ann-subscribers.select2-container .select2-selection__choice .ann-sub-circle {
    width: 18px;
    height: 18px;
    font-size: 10px;
}
#mainpage-announcement-modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding-left: 4px;
    padding-right: 8px;
}
#mainpage-announcement-modal .select2-container--default .select2-results__option--highlighted {
    background-color: #e0f2fe;
}
#mainpage-announcement-modal .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e0f2fe;
}

/* Detail modal: Asana layout lives in AnnouncementMkView.css (loaded last on MainPage). */
#mainpage-announcement-detail-modal .modal-dialog.ann-detail-dialog {
    /* overridden by AnnouncementMkView.css */
}
#mainpage-announcement-detail-modal .modal-content {
    /* overridden by AnnouncementMkView.css */
}
#mainpage-announcement-detail-modal .modal-body.ann-detail-body {
    /* overridden by AnnouncementMkView.css */
}
#mainpage-announcement-detail-modal .ann-detail-body .row {
    min-height: 200px;
}
#mainpage-announcement-detail-modal .ann-detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}
.ann-detail-left {
    border-right: 1px solid #e2e8f0;
    padding-right: 20px;
}
.ann-detail-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.ann-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.ann-avatar-user {
    background: #dc2626;
}
.ann-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}
.ann-detail-name {
    font-weight: 600;
    color: #0f172a;
}
.ann-detail-time-badge {
    background: #fef08a;
    color: #854d0e;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.ann-detail-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #0f172a;
}
.ann-detail-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}
.ann-detail-right {
    padding-left: 20px;
}
.ann-detail-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}
.ann-detail-tabs .ann-tab {
    border: none;
    background: none;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #64748b;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.ann-detail-tabs .ann-tab.active {
    color: #0f172a;
    font-weight: 600;
    border-bottom-color: #3b82f6;
}
.ann-detail-tabs .ann-tab .badge {
    margin-left: 4px;
    background: #3b82f6;
    font-size: 11px;
}
.ann-comments-list {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 12px;
}
.ann-comment-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ann-comment-item .ann-avatar-sm {
    flex-shrink: 0;
}
.ann-comment-meta {
    font-size: 12px;
    color: #64748b;
}
.ann-comment-meta-actions {
    margin-left: auto;
}
.ann-comment-delete {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
}
.ann-comment-delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

.ann-comment-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.ann-comment-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}
.ann-comment-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}
.ann-comment-lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
}
.ann-comment-lightbox-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.ann-comment-lightbox-img {
    max-width: 85vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
.ann-comment-lightbox-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #16a34a;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}
.ann-comment-lightbox-download:hover {
    background: #15803d;
    color: #fff;
}

.ann-comment-item .ann-comment-meta {
    flex: 1;
    min-width: 0;
}
.ann-comment-text {
    width: 100%;
    font-size: 13px;
    color: #334155;
    padding-left: 34px;
}
.ann-add-comment {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ann-add-comment textarea {
    resize: vertical;
    min-height: 60px;
}
.ann-detail-creator-actions.hide { display: none !important; }
#ann-detail-delete-btn { font-size: 13px; }
.ann-subscriber-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    min-height: 28px;
}
.ann-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    color: #334155;
}
.ann-sub-pill .ann-sub-circle {
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
}
.ann-sub-remove {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
}
.ann-sub-remove:hover { color: #dc2626; }
#ann-detail-subscriber-manage.hide { display: none !important; }
#ann-detail-subscriber-manage .ann-detail-add-subscriber { margin-top: 4px; }
.ann-subscribers-list {
    font-size: 13px;
    color: #334155;
}
.ann-subscribers-list .small { margin-bottom: 8px; }
.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.shortcuts-grid .shortcut {
    text-decoration: none;
    color: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, #fafbff 0%, #ffffff 100%);
    font-weight: 600;
    color: #0f172a;
    transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease, background 0.25s ease;
    position: relative;
}
.shortcuts-grid .shortcut:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(145deg, #eff6ff 0%, #f8fafc 100%);
}
.shortcuts-grid .shortcut .fa {
    transition: transform 0.2s ease;
}
.shortcuts-grid .shortcut:hover .fa {
    transform: scale(1.1);
}
.shortcuts-grid .shortcut .badge {
    position: absolute;
    top: 8px;
    right: 10px;
}
.mainpage-table {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}
.mainpage-table thead th {
    border: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 12px 14px;
}
.mainpage-table tbody tr {
    transition: background 0.2s ease;
}
.mainpage-table tbody tr:hover {
    background: rgba(241, 245, 249, 0.8);
}
.mainpage-table tbody td {
    border-top: 1px solid #f1f5f9;
    color: #0f172a;
    vertical-align: middle;
    font-weight: 500;
    padding: 10px 14px;
}
.mainpage-table tbody td a.text-primary {
    transition: color 0.2s ease;
}
.mainpage-table tbody td a.text-primary:hover {
    color: #2563eb !important;
}
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.status-dot.green { background: #22c55e; }
.status-dot.blue { background: #3b82f6; }
.status-dot.gray { background: #94a3b8; }
.agenda .tab-group {
    display: inline-flex;
    gap: 6px;
    font-size: 12px;
    align-items: center;
}
.agenda .tab {
    padding: 8px 12px;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.agenda .tab:hover {
    background: rgba(139, 92, 246, 0.08);
    color: #6d28d9;
}
.agenda .tab.active {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #5b21b6;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}
.agenda-list {
    margin: 0 0 8px 0;
    padding: 0;
}
.agenda-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}
.agenda-item:hover {
    background: rgba(248, 250, 252, 0.8);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-item-row .agenda-item-title { margin-right: 8px; }
.agenda-item-row .agenda-date { margin-right: 6px; font-size: 12px; }
.agenda-item-row .agenda-time { margin-right: 8px; font-size: 12px; }
.agenda-panel.hide { display: none !important; }
.agenda-tabs .tab { cursor: pointer; }
.agenda-item .agenda-datetime {
    flex-shrink: 0;
}
.agenda-item .label { font-size: 10px; }
.agenda-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
}
.agenda-item .dot.green { background: #22c55e; }
.agenda-item .dot.blue { background: #3b82f6; }
.agenda-item .title {
    font-weight: 700;
    color: #0f172a;
}
.agenda-empty {
    padding: 6px 0 2px;
}
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    transition: transform 0.15s ease;
}
.mainpage-table tbody tr:hover .status-pill {
    transform: scale(1.02);
}
.badge.blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    font-weight: 700;
}
.status-pill.green { background: #dcfce7; color: #15803d; }
.status-pill.amber { background: #fef9c3; color: #b45309; }
.status-pill.gray { background: #e2e8f0; color: #475569; }
.time-block {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-right: 8px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    min-width: 110px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.time-block:hover {
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.12);
    transform: translateY(-1px);
}
.time-block .value {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}
.mainpage-card .actions .btn,
.mainpage-card .btn-default.btn-xs {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.mainpage-card .actions .btn:hover,
.mainpage-card .btn-default.btn-xs:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mainpage-card .btn-outline-primary {
    border-color: #3b82f6;
    color: #1d4ed8;
}
.mainpage-card .btn-outline-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}
.time-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================
   Time card: KHÔNG tăng kích thước ô
   - Lịch sử: lấp đầy ô + cuộn bên trong
   - Con số: nằm giữa nhưng lệch trái nhẹ + to hơn chút
   ========================= */
.mainpage-card.area-time { /* chỉ ảnh hưởng ô time */
    display: flex;
    flex-direction: column;
}
.mainpage-card.area-time .card-body.time-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.mainpage-card.area-time .logged-time-wrap {
    flex: 0 0 auto;
}
.mainpage-card.area-time .logged-time-value {
    font-size: 1.95rem; /* tăng nhẹ */
    text-align: center;
    transform: translateX(-10px); /* lệch trái nhẹ nhưng vẫn giữa */
}
.mainpage-card.area-time .logged-time-label {
    text-align: center;
    transform: translateX(-10px);
}
.mainpage-card.area-time .login-history-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.mainpage-card.area-time .login-history-list {
    /* Giữ ô time không bị cao quá: giới hạn chiều cao list và cuộn */
    flex: 0 0 auto;
    min-height: 0;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0;
}
.logged-time-wrap {
    padding: 12px 0;
}
.logged-time-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0891b2;
    line-height: 1.3;
}
.logged-time-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
}
.login-history-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.login-history-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
}
.login-history-list {
    max-height: 200px;
    overflow-y: auto;
}
.login-history-item {
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.login-history-item:last-child { border-bottom: none; }
.login-history-item .hist-time {
    color: #334155;
}
.login-history-item .hist-duration {
    color: #0891b2;
    font-weight: 600;
}
.login-history-item .hist-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}
.login-history-item .hist-status.status-on {
    background: #ccfbf1;
    color: #0f766e;
}
.login-history-item .hist-status.status-off {
    background: #f1f5f9;
    color: #475569;
}
.time-empty {
    padding: 10px 0;
}
/* ========== Popup: Related To / lookup – bảng làm lại đẹp, rộng rãi, hiệu ứng ========== */
.modal-content:has(#popupPageContainer) {
    border: none;
    border-radius: 20px;
    box-shadow: 0 28px 56px rgba(0,0,0,0.14), 0 12px 28px rgba(99, 102, 241, 0.08);
    overflow: hidden;
}
.modal-content:has(#popupPageContainer) .modal-header {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    color: #fff;
    border: none;
    padding: 20px 28px;
    border-radius: 20px 20px 0 0;
}
.modal-content:has(#popupPageContainer) .modal-header h4 {
    color: #fff;
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0;
    letter-spacing: 0.02em;
}
.modal-content:has(#popupPageContainer) .modal-header .close {
    color: #fff;
    opacity: 0.95;
    text-shadow: none;
    margin-top: -4px;
    font-size: 1.5rem;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.modal-content:has(#popupPageContainer) .modal-header .close:hover {
    opacity: 1;
    color: #fff;
    background: rgba(255,255,255,0.15);
}
.modal-content:has(#popupPageContainer) .modal-body {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 24px 28px 28px;
}
#popupPageContainer {
    padding: 0 !important;
}
#popupPageContainer .row,
#popupPageContainer .row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#popupPageContainer .listViewActionsDiv,
#popupPageContainer .contentsDiv {
    width: 100% !important;
}
#popupPageContainer .popupEntriesTableContainer {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(99, 102, 241, 0.04);
}
#popupPageContainer .listViewEntriesTable {
    width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    border: none !important;
}
#popupPageContainer .listViewEntriesTable thead tr.listViewHeaders th {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 20px !important;
    border: none !important;
    border-bottom: 3px solid #cbd5e1;
    vertical-align: middle !important;
}
#popupPageContainer .listViewEntriesTable thead .listViewContentHeaderValues {
    color: #475569;
    transition: color 0.2s ease;
}
#popupPageContainer .listViewEntriesTable thead .listViewContentHeaderValues:hover {
    color: #6366f1;
}
#popupPageContainer .listViewEntriesTable tr.searchRow td {
    background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
    padding: 16px 20px !important;
    border-bottom: 2px solid #e2e8f0;
    vertical-align: middle !important;
}
#popupPageContainer .listViewEntriesTable tr.searchRow input[type="text"],
#popupPageContainer .listViewEntriesTable tr.searchRow select,
#popupPageContainer .listViewEntriesTable tr.searchRow .select2-container .select2-selection {
    min-width: 160px;
    min-height: 42px;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 14px !important;
    font-size: 14px;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#popupPageContainer .listViewEntriesTable tr.searchRow input:focus,
#popupPageContainer .listViewEntriesTable tr.searchRow select:focus {
    border-color: #6366f1 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
#popupPageContainer .listViewEntriesTable tr.searchRow .btn-success {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: #fff;
    padding: 10px 22px;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#popupPageContainer .listViewEntriesTable tr.searchRow .btn-success:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}
#popupPageContainer .listViewEntriesTable tbody tr.listViewEntries {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
#popupPageContainer .listViewEntriesTable tbody tr.listViewEntries:nth-child(even) {
    background: #fafbfc;
}
#popupPageContainer .listViewEntriesTable tbody tr.listViewEntries:hover {
    background: #eef2ff !important;
    box-shadow: inset 3px 0 0 #6366f1;
}
#popupPageContainer .listViewEntriesTable tbody tr.listViewEntries td {
    padding: 14px 20px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px;
    color: #334155;
}
#popupPageContainer .listViewEntriesTable tbody tr.listViewEntries td a {
    color: #6366f1;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
#popupPageContainer .listViewEntriesTable tbody tr.listViewEntries td a:hover {
    color: #4338ca;
    text-decoration: underline;
}
#popupPageContainer .select2-container {
    width: 100% !important;
    max-width: 220px;
}
#popupPageContainer .paginationDiv {
    padding: 18px 0 0 !important;
    margin-top: 16px;
}
#popupPageContainer .paginationDiv .pagination ul li a,
#popupPageContainer .paginationDiv .pagination ul li span {
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}
#popupPageContainer .paginationDiv .pagination ul li.active a {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #6366f1;
    color: #fff;
}
#popupPageContainer .paginationDiv .pagination ul li a:hover {
    background: #eef2ff;
    color: #4338ca;
}

/* ========== Project/ProjectTask list: vibrant overrides (force) ========== */
body[data-module="Project"],
body[data-module="ProjectTask"] {
    font-family: "Times New Roman", Times, serif !important;
}

body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 50%, #e0e7ff 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 55%, #818cf8 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 60%, #eef2ff 100%) !important;
}
body[data-module="Project"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: linear-gradient(90deg, #bae6fd 0%, #cffafe 50%, #c7d2fe 100%) !important;
    box-shadow: inset 4px 0 0 #0ea5e9 !important;
}

body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-actions-container {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #cffafe 100%) !important;
    border: 1px solid rgba(5, 150, 105, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.22), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > thead > tr.listViewContentHeader > th {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 55%, #0ea5e9 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:nth-child(even) {
    background: linear-gradient(90deg, #ecfeff 0%, #f0fdf4 60%, #e0f2fe 100%) !important;
}
body[data-module="ProjectTask"] #listViewContent.list-view-sidebar-offset .listview-table > tbody > tr.listViewEntries:hover {
    background: linear-gradient(90deg, #bbf7d0 0%, #a5f3fc 50%, #bae6fd 100%) !important;
    box-shadow: inset 4px 0 0 #10b981 !important;
}

/* ========== Project Task Board (tab) ========== */
body[data-module="Project"] .project-task-board {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 8px 16px;
}

/* ===== Reuse Project Task board UI for Reports module (Task Report popup) ===== */
body[data-module="Reports"] .project-task-board {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 8px 16px;
}
body[data-module="Project"] .project-task-board .board-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="Reports"] .project-task-board .board-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="Project"] .project-task-board .board-tabs {
    display: inline-flex;
    gap: 8px;
}
body[data-module="Reports"] .project-task-board .board-tabs {
    display: inline-flex;
    gap: 8px;
}
body[data-module="Project"] .project-task-board .board-tabs .btn.active {
    background: #e0f2fe;
    border-color: #bae6fd;
}
body[data-module="Reports"] .project-task-board .board-tabs .btn.active {
    background: #e0f2fe;
    border-color: #bae6fd;
}
body[data-module="Project"] .project-task-board .board-columns {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
body[data-module="Reports"] .project-task-board .board-columns {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
body[data-module="Project"] .project-task-board .board-column {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-width: 220px;
    max-width: 280px;
    padding: 10px;
}
body[data-module="Reports"] .project-task-board .board-column {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-width: 220px;
    max-width: 280px;
    padding: 10px;
}
body[data-module="Project"] .project-task-board .board-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 10px;
}
body[data-module="Reports"] .project-task-board .board-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 10px;
}
body[data-module="Project"] .project-task-board .status-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body[data-module="Project"] .project-task-board .status-count {
    background: #e2e8f0;
    color: #334155;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
}
body[data-module="Project"] .project-task-board .board-add-task {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
    text-decoration: none;
    font-size: 11px;
}
body[data-module="Project"] .project-task-board .board-add-task:hover {
    background: #bfdbfe;
    color: #0369a1;
}
body[data-module="Project"] .project-task-board .board-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 80px;
}
body[data-module="Project"] .project-task-board .board-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body[data-module="Project"] .project-task-board .board-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.18);
}
body[data-module="Project"] .project-task-board .board-column[data-status="Completed"] .board-card {
    background: #dcfce7 !important;
    border-color: #86efac !important;
}
body[data-module="Project"] .project-task-board .board-column[data-status="Completed"] .board-card:hover {
    background: #bbf7d0 !important;
    border-color: #4ade80 !important;
}
body[data-module="Project"] .project-task-board .board-card.dragging {
    opacity: 0.6;
    cursor: grabbing;
}
body[data-module="Project"] .project-task-board .board-card {
    cursor: grab;
}
body[data-module="Project"] .project-task-board .board-cards.drop-over,
body[data-module="Project"] .project-task-board .board-column.drop-over {
    background: rgba(147, 197, 253, 0.2) !important;
    border-radius: 8px;
    border: 2px dashed #3b82f6 !important;
}
body[data-module="Project"] .project-task-board .card-title {
    font-weight: 600;
    margin-bottom: 8px;
}
body[data-module="Project"] .project-task-board .card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #64748b;
    font-size: 12px;
}
body[data-module="Project"] .project-task-board .card-progress {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #334155;
    margin-top: 8px;
}
body[data-module="Project"] .project-task-board .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
body[data-module="Project"] .project-task-board .card-post-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body[data-module="Project"] .project-task-board .card-comment-icon {
    color: #64748b;
    margin-left: 4px;
}
body[data-module="Project"] .project-task-board .card-add-assignee {
    margin-left: 6px;
    cursor: pointer;
    color: #3b82f6;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
}
body[data-module="Project"] .project-task-board .card-add-assignee:hover {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.2);
}
body[data-module="Project"] .project-task-board .card-progress-value {
    color: #334155;
    font-weight: 500;
}
body[data-module="Project"] .project-task-board .task-history-item .history-change {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}
body[data-module="Project"] .project-task-board .task-history-empty {
    padding: 20px;
    text-align: center;
}
body[data-module="Project"] .project-task-board .task-detail-right .task-detail-panel {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
body[data-module="Project"] .project-task-board #task-panel-comments {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body[data-module="Project"] .project-task-board #task-panel-comments .ann-add-comment {
    flex-shrink: 0;
    margin-top: 0;
}
body[data-module="Project"] .project-task-board .task-detail-panel.hidden {
    display: none;
}
body[data-module="Project"] .project-task-board .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
}
body[data-module="Project"] .project-task-board .panel-close {
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
}
body[data-module="Project"] .project-task-board .panel-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body[data-module="Project"] .project-task-board .detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
body[data-module="Project"] .project-task-board .detail-row .label {
    color: #64748b;
}

body[data-module="Project"] .project-task-board .task-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
    padding-top: 120px;
}
body[data-module="Reports"] .project-task-board .task-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
    padding-top: 120px;
}
body[data-module="Project"] .project-task-board .task-detail-modal.hidden {
    display: none;
}
body[data-module="Reports"] .project-task-board .task-detail-modal.hidden {
    display: none;
}
body[data-module="Project"] .project-task-board .task-detail-dialog {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 1100px;
    height: 88vh;
    max-height: calc(100vh - 56px);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
body[data-module="Reports"] .project-task-board .task-detail-dialog {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 1100px;
    height: 88vh;
    max-height: calc(100vh - 56px);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
body[data-module="Project"] .project-task-board .task-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}
body[data-module="Reports"] .project-task-board .task-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}
body[data-module="Project"] .project-task-board .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="Reports"] .project-task-board .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="Project"] .project-task-board .status-pill {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #3730a3;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}
body[data-module="Reports"] .project-task-board .status-pill {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #3730a3;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}
body[data-module="Project"] .project-task-board .detail-id {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
body[data-module="Reports"] .project-task-board .detail-id {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
body[data-module="Project"] .project-task-board .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-module="Reports"] .project-task-board .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-module="Project"] .project-task-board .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 20px;
    color: #64748b;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
body[data-module="Reports"] .project-task-board .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 20px;
    color: #64748b;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
body[data-module="Project"] .project-task-board .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
body[data-module="Reports"] .project-task-board .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
body[data-module="Project"] .project-task-board .tab-btn.active {
    background: #6366f1;
    color: #fff;
}
body[data-module="Reports"] .project-task-board .tab-btn.active {
    background: #6366f1;
    color: #fff;
}
body[data-module="Project"] .project-task-board .panel-close {
    font-size: 22px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
body[data-module="Reports"] .project-task-board .panel-close {
    font-size: 22px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
body[data-module="Project"] .project-task-board .panel-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}
body[data-module="Reports"] .project-task-board .panel-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}
body[data-module="Project"] .project-task-board .task-detail-footer {
    flex-shrink: 0;
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
}
body[data-module="Project"] .project-task-board .task-detail-footer .detail-save {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    transition: box-shadow 0.2s, transform 0.1s;
}
body[data-module="Project"] .project-task-board .task-detail-footer .detail-save:hover {
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}
body[data-module="Project"] .project-task-board .task-detail-footer .detail-cancel {
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: background 0.15s, border-color 0.15s;
}
body[data-module="Project"] .project-task-board .task-detail-footer .detail-cancel:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
body[data-module="Project"] .project-task-board .task-detail-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}
body[data-module="Project"] .project-task-board .task-detail-left {
    flex: 1;
    padding: 22px 26px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* Chừa khoảng trống phía dưới để khi scroll thấy hết Subtasks, không bị footer Save/Cancel che mất */
    padding-bottom: 80px;
}
body[data-module="Project"] .project-task-board .task-detail-left > * {
    flex-shrink: 0;
}
body[data-module="Project"] .project-task-board .task-detail-right {
    width: 340px;
    min-width: 300px;
    border-left: 1px solid #e5e7eb;
    padding: 20px 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
body[data-module="Project"] .project-task-board .detail-back-wrap {
    margin-bottom: 10px;
}
body[data-module="Project"] .project-task-board .detail-back-wrap.hide {
    display: none;
}
body[data-module="Project"] .project-task-board .detail-back-link {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body[data-module="Project"] .project-task-board .detail-back-link:hover {
    text-decoration: underline;
    color: #4f46e5;
}
body[data-module="Project"] .project-task-board .detail-breadcrumb {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
body[data-module="Project"] .project-task-board .detail-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
body[data-module="Project"] .project-task-board .detail-section {
    margin-bottom: 20px;
}
body[data-module="Project"] .project-task-board .detail-description {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-module="Project"] .project-task-board .detail-description:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
body[data-module="Project"] .project-task-board .section-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
    font-size: 14px;
}
body[data-module="Project"] .project-task-board .detail-table {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
}
body[data-module="Reports"] .project-task-board .task-detail-footer {
    flex-shrink: 0;
    padding: 18px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
body[data-module="Project"] .project-task-board .detail-table .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
body[data-module="Project"] .project-task-board .detail-table .detail-row:nth-child(even) {
    background: #fafbfc;
}
body[data-module="Project"] .project-task-board .detail-table .detail-row:last-child {
    border-bottom: none;
    gap: 6px;
}
body[data-module="Project"] .project-task-board .detail-table .detail-row .label {
    color: #64748b;
    font-weight: 500;
}
body[data-module="Project"] .project-task-board .detail-table input,
body[data-module="Project"] .project-task-board .detail-table select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    transition: border-color 0.15s;
}
body[data-module="Project"] .project-task-board .detail-table input:focus,
body[data-module="Project"] .project-task-board .detail-table select:focus {
    outline: none;
    border-color: #6366f1;
}
body[data-module="Project"] .project-task-board .detail-table .detail-dates {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body[data-module="Project"] .project-task-board .progress-suffix {
    margin-left: 4px;
    color: #64748b;
    font-weight: 500;
}
body[data-module="Project"] .project-task-board .detail-link {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}
body[data-module="Project"] .project-task-board .detail-link:hover {
    text-decoration: underline;
}
body[data-module="Project"] .project-task-board .attach-btn {
    margin: 8px 0 16px;
}
body[data-module="Project"] .project-task-board .detail-subtasks {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .section-label {
    margin-bottom: 12px;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .tasksListToolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .tasksListToolbar .quickAddTaskInput {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .tasksListToolbar .quickAddTaskInput:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
body[data-module="Project"] .project-task-board .board-subtasks-block .board-subtask-save-btn {
    flex-shrink: 0;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.15s;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-list-row:hover {
    background: #e0e7ff;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-title.task-done {
    text-decoration: line-through;
    color: #94a3b8;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-duration {
    font-size: 12px;
    color: #64748b;
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-assignee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border-radius: 8px;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-wrap {
    position: relative;
    flex-shrink: 0;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-trigger:hover {
    background: #e0e7ff;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-icon.backlog {
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: transparent;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-icon.inprogress {
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: linear-gradient(90deg, #94a3b8 50%, transparent 50%);
    background-origin: border-box;
    box-sizing: border-box;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-icon.complete {
    border: none;
    border-radius: 50%;
    background: #22c55e;
    position: relative;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-icon.complete::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 100;
    padding: 6px 0;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-dropdown.hidden {
    display: none;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-option:hover {
    background: #f1f5f9;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-option .subtask-status-icon {
    width: 16px;
    height: 16px;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-option .subtask-status-icon.complete::after {
    left: 4px;
    top: 1px;
    width: 3px;
    height: 6px;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-option.subtask-status-option-selected {
    background: #e0e7ff;
    color: #3730a3;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .subtask-status-option.subtask-status-option-selected::after {
    content: '✓';
    margin-left: auto;
    font-size: 14px;
    font-weight: bold;
    color: #3730a3;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-list-empty {
    color: #94a3b8;
    font-size: 13px;
    margin-top: 12px;
    padding: 20px 16px;
    text-align: center;
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
}
body[data-module="Project"] .project-task-board .board-subtasks-block .task-list-container {
    min-height: 44px;
}
body[data-module="Project"] .project-task-board .task-detail-right .ann-detail-tabs {
    margin-bottom: 14px;
}
body[data-module="Project"] .project-task-board .task-comments-badge {
    background: #6366f1;
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comments-list {
    flex-shrink: 0;
    margin-bottom: 0;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-item {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-item:last-of-type {
    border-bottom: none;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-text {
    font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-attachments {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-file-link {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
}
body[data-module="Project"] .project-task-board .task-detail-panel .ann-comment-file-link:hover {
    text-decoration: underline;
}
body[data-module="Project"] .project-task-board .task-comment-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-module="Project"] .project-task-board .task-comment-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
body[data-module="Project"] .project-task-board .task-comment-add {
    align-self: flex-end;
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
}
body[data-module="Project"] .project-task-board .task-comment-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
body[data-module="Project"] .project-task-board .task-comment-emoji-btn,
body[data-module="Project"] .project-task-board .task-comment-upload-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}
body[data-module="Project"] .project-task-board .task-comment-emoji-btn:hover,
body[data-module="Project"] .project-task-board .task-comment-upload-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}
body[data-module="Project"] .project-task-board .task-comment-file-name {
    font-size: 12px;
    color: #64748b;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-module="Project"] .project-task-board .task-comment-file-name.hidden {
    display: none !important;
}
body[data-module="Project"] .project-task-board .task-comment-emoji-picker {
    position: absolute;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 260px;
    z-index: 50;
}
body[data-module="Project"] .project-task-board .task-comment-emoji-picker.hidden {
    display: none !important;
}
body[data-module="Project"] .project-task-board .task-emoji-item {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}
body[data-module="Project"] .project-task-board .task-emoji-item:hover {
    background: #f1f5f9;
}
body[data-module="Project"] .project-task-board .ann-add-comment {
    position: relative;
}
body[data-module="Project"] .project-task-board .comments-title {
    font-weight: 600;
    margin-bottom: 10px;
}
body[data-module="Project"] .project-task-board .comments-empty {
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    margin-top: 80px;
}
body[data-module="Project"] .project-task-board .comment-box {
    margin-top: auto;
}
/* ========== Document Management – Full trắng cả trang ========== */
/* Body + toàn bộ nền trắng khi vào Documents */
body[data-module="Documents"],
body[data-module="Documents"] .bodyContents,
body[data-module="Documents"] .main-container,
body[data-module="Documents"] .main-container .content-area,
body[data-module="Documents"] #listViewContent,
body[data-module="Documents"] #listViewContent .col-sm-12 {
    background: #fff !important;
}
/* Biến màu Documents – hiện đại, tinh tế */
:root {
    --doc-primary: #2563eb;
    --doc-primary-dark: #1d4ed8;
    --doc-primary-light: #3b82f6;
    --doc-accent: #0ea5e9;
    --doc-bg-sidebar: #fafbfc;
    --doc-bg-main: #ffffff;
    --doc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --doc-shadow: 0 4px 12px rgba(0,0,0,0.06);
    --doc-shadow-hover: 0 8px 24px rgba(0,0,0,0.08);
    --doc-radius: 12px;
    --doc-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Documents: chỉ còn 2 mục (FOLDERS + bảng file) – ẩn hết thanh trái, thanh trên, khối đen */
body[data-module="Documents"] .main-container #sidebar-essentials.sidebar-essentials {
    display: none !important;
}
body[data-module="Documents"] .main-container #modnavigator,
body[data-module="Documents"] .main-container .module-nav,
body[data-module="Documents"] .main-container .mod-switcher-container {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
/* Đảm bảo app-nav và nút Add/New Document luôn hiện trên Documents */
body[data-module="Documents"] .app-nav,
body[data-module="Documents"] .app-nav.container-fluid {
    display: block !important;
    visibility: visible !important;
}
body[data-module="Documents"] .app-nav .module-action-bar .navbar-right,
body[data-module="Documents"] .app-nav #appnav,
body[data-module="Documents"] .app-nav .navbar-right .nav {
    display: flex !important;
    visibility: visible !important;
}
body[data-module="Documents"] .app-nav .module-buttons,
body[data-module="Documents"] .app-nav .btn-default.module-buttons {
    display: inline-block !important;
    visibility: visible !important;
}
/* Ẩn nút NEW DOCUMENT + CUSTOMIZE trên header (chỉ giữ nút New Document phía dưới toolbar) */
body[data-module="Documents"] .app-nav .doc-header-new-doc-hidden,
body[data-module="Documents"] .app-nav .doc-header-customize-hidden {
    display: none !important;
}
/* Giữ app-nav, breadcrumb cho gọn */
body[data-module="Documents"] .app-nav .module-breadcrumb {
    max-width: 50%;
}
body[data-module="Documents"] .app-nav .module-buttons.dropdown-toggle {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.96) 0%, rgba(14, 165, 233, 0.96) 45%, rgba(0, 229, 255, 0.96) 100%) !important;
    color: #e5f2ff !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    border: 1px solid rgba(56, 189, 248, 0.75) !important;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.45),
        0 0 0 1px rgba(56, 189, 248, 0.45),
        0 0 22px rgba(56, 189, 248, 0.65);
    text-shadow: 0 0 14px rgba(15, 23, 42, 0.65);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
body[data-module="Documents"] .app-nav .module-buttons.dropdown-toggle:hover {
    color: #f9fafb !important;
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(56, 189, 248, 0.85),
        0 0 30px rgba(56, 189, 248, 0.9);
    background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(56, 189, 248, 1) 40%, rgba(244, 244, 245, 1) 100%) !important;
}
body[data-module="Documents"] .main-container #sidebar-essentials.sidebar-essentials.hide + .listViewPageDiv.content-area,
body[data-module="Documents"] .main-container .listViewPageDiv.content-area#listViewContent,
body[data-module="Documents"] .main-container #listViewContent.listViewPageDiv {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
body[data-module="Documents"] .main-container #listViewContent.list-view-sidebar-offset {
    margin-left: 0 !important;
    padding: 20px !important;
    padding-top: 16px !important;
    background: #f1f5f9 !important;
    border-radius: 0;
    margin-top: 0;
    min-height: calc(100vh - 56px);
    box-shadow: none;
}
body[data-module="Documents"] #listViewContent.list-view-sidebar-offset .col-sm-12.col-xs-12 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body[data-module="Documents"] .main-container {
    padding-left: 0 !important;
}

/* Khung chính – card nổi, shadow hiện đại */
body[data-module="Documents"] .doc-management-view {
    min-height: calc(100vh - 56px - 40px);
}
.doc-management-view {
    display: flex;
    min-height: 440px;
    margin: 0;
    background: #fff;
    border-radius: var(--doc-radius);
    border: 1px solid #e2e8f0;
    box-shadow: var(--doc-shadow);
    overflow: hidden;
    transition: box-shadow var(--doc-transition), border-color var(--doc-transition);
}
.doc-management-view:hover {
    box-shadow: var(--doc-shadow-hover);
    border-color: #cbd5e1;
}

/* Sidebar – nền nhạt, accent xanh nhạt */
.doc-management-sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    background: var(--doc-bg-sidebar);
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}
.doc-management-sidebar-header {
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    position: relative;
}
.doc-management-sidebar-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--doc-primary) 0%, var(--doc-accent) 100%);
    border-radius: 0 4px 4px 0;
}
.doc-management-sidebar-title {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-left: 4px;
}
.doc-management-folders {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
    min-height: 80px;
}
.doc-management-folder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 4px;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    border-radius: 10px;
    transition: all var(--doc-transition);
}
.doc-management-folder-item:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--doc-primary-dark);
    transform: translateX(4px);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08);
}
.doc-management-folder-item.active {
    background: rgba(37, 99, 235, 0.1);
    color: var(--doc-primary-dark);
    font-weight: 600;
    border-left: 3px solid var(--doc-primary);
    padding-left: 11px;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.1);
}
.doc-management-folder-item.active:hover {
    background: rgba(37, 99, 235, 0.14);
}
.doc-management-folder-item .doc-folder-icon {
    color: #64748b;
    font-size: 16px;
    transition: transform var(--doc-transition), color var(--doc-transition);
}
.doc-management-folder-item:hover .doc-folder-icon,
.doc-management-folder-item.active .doc-folder-icon {
    color: var(--doc-primary);
    transform: scale(1.08);
}
.doc-folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-management-sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.doc-management-add-folder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--doc-primary) 0%, var(--doc-accent) 100%);
    border: none;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transition: all var(--doc-transition);
}
.doc-management-add-folder:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--doc-primary-dark) 0%, #0284c7 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

/* Vùng nội dung chính */
.doc-management-main {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background: #f8fafc;
    padding: 18px 22px;
}
.doc-management-main .col-sm-12 {
    max-width: 100%;
    padding: 0 !important;
}

.doc-management-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.doc-management-toolbar .doc-btn-new-document {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.96) 0%, rgba(14, 165, 233, 0.96) 45%, rgba(0, 229, 255, 0.96) 100%) !important;
    color: #e5f2ff !important;
    border: 1px solid rgba(56, 189, 248, 0.75) !important;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.45),
        0 0 0 1px rgba(56, 189, 248, 0.45),
        0 0 22px rgba(56, 189, 248, 0.65);
    text-shadow: 0 0 14px rgba(15, 23, 42, 0.65);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.doc-management-toolbar .doc-btn-new-document i {
    font-size: 13px;
}
.doc-management-toolbar .doc-btn-new-document:hover {
    color: #f9fafb !important;
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(56, 189, 248, 0.85),
        0 0 30px rgba(56, 189, 248, 0.9);
    background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(56, 189, 248, 1) 40%, rgba(244, 244, 245, 1) 100%) !important;
}

/* Documents: History button – sát phải, màu nổi hơn, to hơn một chút */
.doc-management-toolbar .doc-btn-history {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #e0f2fe 0%, #c7d2fe 40%, #bfdbfe 100%);
    color: #111827;
    border: 1px solid rgba(129, 140, 248, 0.95);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.doc-management-toolbar .doc-btn-history i {
    font-size: 14px;
}
.doc-management-toolbar .doc-btn-history:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #a5b4fc 40%, #93c5fd 100%);
    color: #0f172a;
    border-color: rgba(79, 70, 229, 0.95);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
    transform: translateY(-1px);
}
.doc-management-toolbar .doc-current-folder-hint {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    font-size: 12px;
    color: #64748b;
}
.doc-management-toolbar .doc-current-folder-hint i {
    color: var(--doc-primary);
}
.doc-management-toolbar .doc-tag-filter .btn {
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
}

/* Toolbar – card nhẹ, hover nâng */
body[data-module="Documents"] .doc-management-main .listview-actions-container {
    margin-bottom: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: var(--doc-shadow-sm);
    transition: box-shadow var(--doc-transition), transform var(--doc-transition);
}
body[data-module="Documents"] .doc-management-main .listview-actions-container:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body[data-module="Documents"] .doc-management-main .listview-actions-container .row {
    align-items: center;
}
body[data-module="Documents"] .doc-management-main .listview-actions-container .btn-default {
    transition: all var(--doc-transition);
    border-radius: 8px;
}
body[data-module="Documents"] .doc-management-main .listview-actions-container .btn-default:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--doc-primary-dark);
    transform: translateY(-1px);
}
body[data-module="Documents"] .doc-management-main .listview-actions-container .dropdown-toggle {
    border-radius: 8px;
    transition: all var(--doc-transition);
}
body[data-module="Documents"] .doc-management-main .listview-actions-container .dropdown-toggle:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
}

/* Bảng – card, header accent nhạt */
body[data-module="Documents"] .doc-management-main .table-container {
    border-radius: 0;
    border: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
    transition: none;
}
body[data-module="Documents"] .doc-management-main .table-container:hover {
    box-shadow: none;
}
/* Phân trang */
body[data-module="Documents"] .doc-management-main .listview-pagination,
body[data-module="Documents"] .doc-management-main .listViewActions {
    margin: 0;
    font-size: 13px;
}
body[data-module="Documents"] .doc-management-main .listview-pagination a,
body[data-module="Documents"] .doc-management-main .listview-pagination .btn {
    transition: all var(--doc-transition);
    border-radius: 8px;
}
body[data-module="Documents"] .doc-management-main .listview-pagination a:hover,
body[data-module="Documents"] .doc-management-main .listview-pagination .btn:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--doc-primary-dark);
}

/* Float thead – đồng bộ với header */
body[data-module="Documents"] .doc-management-main .floatThead-table.listview-table > thead > tr > th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #334155 !important;
    border-right: 1px solid #e2e8f0;
    border-bottom: 2px solid #e2e8f0;
}

/* Bỏ hàng đen phía dưới – làm trắng toàn bộ vùng đáy trang Documents */
body[data-module="Documents"] .main-container,
body[data-module="Documents"] .main-container .content-area,
body[data-module="Documents"] #listViewContent .col-sm-12 {
    background: #fff !important;
}
/* Ẩn hẳn thanh scroller đen + footer trên Documents */
body[data-module="Documents"] #listViewContent .bottom-fixed-scroll,
body[data-module="Documents"] #listViewContent #scroller_wrapper,
body[data-module="Documents"] .doc-management-main .bottom-fixed-scroll,
body[data-module="Documents"] .doc-management-main #scroller_wrapper {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
body[data-module="Documents"] .doc-management-main .scroller-div {
    display: none !important;
}
body[data-module="Documents"] .footer,
body[data-module="Documents"] .app-footer {
    display: none !important;
}

/* Tabs trên cùng (Details / Updates / ...) */
body[data-module="Documents"] .detailViewPageDiv .detailViewContainerHeader {
    max-width: 1120px;
    margin: 0 auto 10px;
    padding: 12px 4px 0;
}

body[data-module="Documents"] .detailViewPageDiv .nav.nav-tabs {
    border-bottom: none;
    display: inline-flex;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.7), rgba(219, 234, 254, 0.9));
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

body[data-module="Documents"] .detailViewPageDiv .nav.nav-tabs > li > a {
    border: none !important;
    border-radius: 999px !important;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body[data-module="Documents"] .detailViewPageDiv .nav.nav-tabs > li.active > a,
body[data-module="Documents"] .detailViewPageDiv .nav.nav-tabs > li.active > a:focus,
body[data-module="Documents"] .detailViewPageDiv .nav.nav-tabs > li.active > a:hover {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
}

body[data-module="Documents"] .detailViewPageDiv .nav.nav-tabs > li > a:hover {
    background: rgba(59, 130, 246, 0.12);
    color: #1f2933;
}

body[data-module="Documents"] .detailViewPageDiv .detailViewTitle {
    max-width: 1120px;
    margin: 6px auto 0;
}

body[data-module="Documents"] .detailViewPageDiv .detailViewTitle .recordLabel {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

body[data-module="Documents"] .detailViewPageDiv .detailViewTitle .tag {
    border-radius: 999px;
}

/* =================== Management → Report (Home_Report_View) =================== */
body[data-module="Home"] .mgmt-report-page {
    padding: 20px 24px 32px;
    background: #f9fafb;
}

body[data-module="Home"] .mgmt-report-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    row-gap: 12px;
}

body[data-module="Home"] .mgmt-report-path {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Lato', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body[data-module="Home"] .mgmt-report-section {
    background: #16a34a;
    color: #ffffff;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

body[data-module="Home"] .mgmt-report-arrow {
    color: #111827;
    font-size: 14px;
}

body[data-module="Home"] .mgmt-report-title-main {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

body[data-module="Home"] .mgmt-report-intro {
    text-align: right;
}

body[data-module="Home"] .mgmt-report-intro-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

body[data-module="Home"] .mgmt-report-intro-subtitle {
    font-size: 13px;
    color: #4b5563;
}

body[data-module="Home"] .mgmt-report-main {
    margin-top: 8px;
}

body[data-module="Home"] .mgmt-report-card {
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body[data-module="Home"] .mgmt-report-card-header {
    padding: 10px 14px 4px;
}

body[data-module="Home"] .pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-module="Home"] .pill-green {
    background: #16a34a;
    color: #ffffff;
}

body[data-module="Home"] .pill-gray {
    background: #6b7280;
    color: #ffffff;
}

body[data-module="Home"] .pill-blue {
    background: #2563eb;
    color: #ffffff;
}

body[data-module="Home"] .mgmt-report-card-body {
    padding: 8px 16px 12px;
    font-size: 13px;
    color: #111827;
}

body[data-module="Home"] .mgmt-report-list {
    padding-left: 18px;
    margin: 0;
}

body[data-module="Home"] .mgmt-report-list li {
    margin-bottom: 4px;
}

body[data-module="Home"] .mgmt-report-flow {
    padding-left: 18px;
    margin: 0;
}

body[data-module="Home"] .mgmt-report-flow li {
    margin-bottom: 4px;
}

body[data-module="Home"] .mgmt-report-table-wrapper {
    margin-bottom: 16px;
}

body[data-module="Home"] .mgmt-report-table-title {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    background: #0ea5e9;
    color: #ffffff;
    border-radius: 6px 6px 0 0;
}

body[data-module="Home"] .mgmt-report-table-title.table-title-green {
    background: #16a34a;
}

body[data-module="Home"] .mgmt-report-table {
    margin-bottom: 0;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-top: none;
    font-size: 13px;
}

body[data-module="Home"] .mgmt-report-table > thead > tr > th {
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-module="Home"] .mgmt-report-table-components tbody tr:nth-child(even) {
    background: #f9fafb;
}

body[data-module="Home"] .mgmt-report-table-functions tbody tr.alt {
    background: #f3f4f6;
}

/* ========== Documents Detail View – giao diện hiện đại, nhiều màu sắc ========== */
body[data-module="Documents"] .detailViewContainer {
    background: radial-gradient(circle at top left, #eff6ff 0, #f9fafb 38%, #e5e7eb 90%);
    padding: 24px 24px 40px;
}

body[data-module="Documents"] .detailViewContainer .details.row {
    max-width: 1120px;
    margin: 0 auto;
}

/* Card cho từng block (Basic Info, Description, File Details, History) */
body[data-module="Documents"] .detailViewContainer .block {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 18px 22px 12px;
    margin-bottom: 24px;
    backdrop-filter: blur(6px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body[data-module="Documents"] .detailViewContainer .block:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border-color: rgba(96, 165, 250, 0.8);
}

/* Tiêu đề block kiểu tương lai nhỏ gọn */
body[data-module="Documents"] .detailViewContainer .block h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.9);
}

body[data-module="Documents"] .detailViewContainer .block h4 img {
    opacity: 0.8;
}

body[data-module="Documents"] .detailViewContainer .block hr {
    display: none;
}

/* Bảng chi tiết – căn lề thoáng, chữ rõ ràng */
body[data-module="Documents"] .detailViewContainer .detailview-table.no-border {
    width: 100%;
}

body[data-module="Documents"] .detailViewContainer .detailview-table.no-border tr {
    border: none;
}

body[data-module="Documents"] .detailViewContainer .detailview-table.no-border td {
    border: none;
    padding: 9px 10px;
    vertical-align: middle;
}

body[data-module="Documents"] .detailViewContainer .detailview-table .fieldLabel span.muted {
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
}

body[data-module="Documents"] .detailViewContainer .detailview-table .fieldValue .value {
    color: #111827;
    font-weight: 600;
    font-size: 13px;
}

/* Link (Assigned To, File Name...) – màu xanh dương nổi bật */
body[data-module="Documents"] .detailViewContainer .detailview-table .fieldValue .value a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: color 0.18s ease;
}

body[data-module="Documents"] .detailViewContainer .detailview-table .fieldValue .value a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

body[data-module="Documents"] .detailViewContainer .detailview-table .fieldValue .value a:hover {
    color: #1d4ed8;
}

body[data-module="Documents"] .detailViewContainer .detailview-table .fieldValue .value a:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Block File Details – nhấn mạnh, khác màu nhẹ */
body[data-module="Documents"] .detailViewContainer .block[data-block="LBL_FILE_INFORMATION"] {
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    border-color: rgba(56, 189, 248, 0.55);
}

body[data-module="Documents"] .detailViewContainer .block[data-block="LBL_FILE_INFORMATION"] .detailview-table .fieldValue .value {
    color: #0f172a;
}

/* Hàng Download Count – làm badge nhỏ */
body[data-module="Documents"] #Documents_detailView_fieldLabel_filedownloadcount span.muted {
    text-transform: uppercase;
}

body[data-module="Documents"] #Documents_detailView_fieldValue_filedownloadcount .value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    color: #111827;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Block history bên dưới – co lại cho gọn */
body[data-module="Documents"] .detailViewContainer .block-document-history {
    margin-top: 8px;
}

/* ========== Form upload Document – form bự, nhiều định dạng (PDF, Doc, Xlsx, ảnh) ========== */
/* ========== Add New Folder – form tạo/sửa folder Documents ========== */
.doc-add-folder-modal.modelContainer {
    width: 90%;
    max-width: 560px;
    font-family: 'Lato', 'Open-sans', sans-serif;
}
/* Full page: form mở trực tiếp qua URL – căn giữa, khoảng cách */
body[data-module="Documents"] .main-container .doc-add-folder-modal.modelContainer,
body[data-module="Documents"] .doc-add-folder-modal.modelContainer {
    margin: 32px auto;
    padding: 0 16px;
}
.doc-add-folder-modal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.doc-add-folder-modal .modal-header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    padding: 18px 22px;
    border-bottom: none;
}
.doc-add-folder-modal .modal-header h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}
.doc-add-folder-modal .modal-header .close {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    font-size: 20px;
    text-shadow: none;
}
.doc-add-folder-modal .modal-header .close:hover {
    color: #fff;
}
.doc-add-folder-modal .modal-body {
    padding: 24px 28px;
    background: #fff;
}

/* ========== Management – Report (Reports module, view=Management) ========== */
body[data-module="Reports"][data-view="Management"] .main-container {
    background: #f3f4f6;
}

.management-report-wrap {
    max-width: 1160px;
    margin: 10px auto 30px;
}

.mgmt-report-header {
    padding: 14px 18px;
    border-radius: 14px;
    background: radial-gradient(circle at top left, #22c55e 0%, #16a34a 40%, #0f766e 100%);
    color: #ecfdf5;
    box-shadow: 0 20px 50px rgba(22, 163, 74, 0.4);
    margin-bottom: 14px;
}

.mgmt-report-hero {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 40%, #0f766e 100%);
    color: #f9fafb;
    border-radius: 14px;
    padding: 18px 22px 18px;
    box-shadow: 0 18px 45px rgba(22, 163, 74, 0.35);
}

/* ========== Teams – Add Person modal (modern card) ========== */
.teams-add-person-modal {
    padding: 0;
}
.teams-add-person-modal .teams-modal-header {
    padding: 22px 28px 20px;
    border-bottom: none;
    background: linear-gradient(90deg, #08A045 0%, #059669 48%, #047857 100%);
    color: #ffffff;
}
.teams-add-person-modal .teams-modal-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}
.teams-add-person-modal .teams-modal-form {
    padding: 20px 28px 8px;
}
.teams-add-person-modal .teams-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.teams-add-person-modal .teams-modal-grid .form-group {
    margin-bottom: 0;
}
.teams-add-person-modal .control-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}
.teams-add-person-modal .form-control {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}
.teams-add-person-modal .form-control:focus {
    border-color: #08A045;
    box-shadow: 0 0 0 3px rgba(8, 160, 69, 0.18);
}
.teams-add-person-modal .teams-modal-footer {
    margin-top: 0;
    padding: 14px 28px 18px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
    background: #ffffff;
}
.teams-add-person-modal .teams-btn-primary,
.teams-add-person-modal .teams-btn--primary {
    background: #08A045;
    border: 1px solid #08A045;
    border-radius: 10px;
    padding: 0 16px;
    height: 40px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
}
.teams-add-person-modal .teams-btn-primary:hover,
.teams-add-person-modal .teams-btn--primary:hover {
    background: #07903e;
    border-color: #07903e;
}
.teams-add-person-modal .teams-btn-secondary,
.teams-add-person-modal .teams-btn--outline {
    border-radius: 10px;
    padding: 0 16px;
    height: 40px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-color: #e2e8f0;
}

/* ========== Teams – Add Group modal (vivid future style) ========== */
.teams-add-group-modal {
    padding: 0;
}
.teams-add-group-modal .teams-modal-header {
    padding: 18px 22px 12px;
    border-bottom: none;
    background: linear-gradient(135deg, #f97316 0%, #ec4899 40%, #8b5cf6 100%);
    color: #f9fafb;
}
.teams-add-group-modal .teams-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.teams-add-group-modal .teams-modal-form {
    padding: 16px 22px 18px;
}
.teams-add-group-modal .control-label {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}
.teams-add-group-modal .form-control {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    box-shadow: none;
}
.teams-add-group-modal .form-control:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 1px #a855f7, 0 0 0 4px rgba(168,85,247,0.2);
}
.teams-add-group-modal .teams-assign-options {
    margin-bottom: 10px;
}
.teams-add-group-modal .teams-assign-options label {
    font-size: 12px;
    color: #4b5563;
}
.teams-add-group-modal .teams-users-checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    background: linear-gradient(180deg, #f9fafb 0%, #eef2ff 100%);
}
.teams-add-group-modal .teams-users-placeholder {
    padding: 10px;
    font-style: italic;
    text-align: center;
}
.teams-add-group-modal .teams-modal-footer {
    margin-top: 10px;
    padding: 12px 22px 16px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
    background: #f9fafb;
}
.teams-add-group-modal .teams-btn-primary {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 40%, #a855f7 100%);
    border: none;
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.teams-add-group-modal .teams-btn-primary:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 40%, #7c3aed 100%);
}
.teams-add-group-modal .teams-btn-secondary {
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-color: #d1d5db;
}

/* ========== Calendar – Leave Request modal (future-style card) ========== */
#leaveRequestCreateModal .modal-dialog {
    max-width: 560px;
    margin-top: 8vh;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#leaveRequestCreateModal .modal-content {
    border-radius: 18px;
    border: none;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15,23,42,0.35);
    background: radial-gradient(circle at top left, #0f172a 0%, #020617 32%, #020617 100%);
}
#leaveRequestCreateModal .modal-header {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
    border-bottom: none;
    padding: 16px 22px;
}
#leaveRequestCreateModal .modal-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e5e7eb;
}
#leaveRequestCreateModal .modal-header .close {
    color: #e5e7eb;
    opacity: 0.9;
    text-shadow: none;
}
#leaveRequestCreateModal .modal-header .close:hover {
    opacity: 1;
}
#leaveRequestCreateModal .modal-body {
    padding: 20px 24px 8px;
    background: transparent;
}
#leaveRequestCreateModal .form-horizontal .form-group {
    margin-bottom: 10px;
}
#leaveRequestCreateModal .control-label {
    color: #9ca3af;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#leaveRequestCreateModal .form-control,
#leaveRequestCreateModal .form-control-static,
#leaveRequestCreateModal textarea.form-control {
    background: rgba(15,23,42,0.85);
    border-radius: 9px;
    border: 1px solid rgba(148,163,184,0.55);
    color: #e5e7eb;
    font-size: 13px;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.8);
}
#leaveRequestCreateModal .form-control:focus,
#leaveRequestCreateModal textarea.form-control:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8, 0 0 0 4px rgba(56,189,248,0.25);
    outline: none;
}
#leaveRequestCreateModal .form-control-static {
    padding-top: 8px;
}
#leaveRequestCreateModal .leave-date-arrow {
    color: #6b7280;
    padding: 0 4px;
}
#leaveRequestCreateModal .leave-requested-days {
    color: #a5b4fc;
    font-weight: 500;
}
#leaveRequestCreateModal .modal-footer {
    border-top: 1px solid rgba(31,41,55,0.9);
    background: rgba(15,23,42,0.98);
    padding: 12px 20px 14px;
}
#leaveRequestCreateModal .btn-save-leave.btn-primary {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #22c55e 100%);
    border: none;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#leaveRequestCreateModal .btn-save-leave.btn-primary:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 50%, #16a34a 100%);
}
#leaveRequestCreateModal .modal-footer .btn.btn-default {
    background: transparent;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.7);
    color: #e5e7eb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
}
#leaveRequestCreateModal .modal-footer .btn.btn-default:hover {
    background: rgba(15,23,42,0.7);
}

.mgmt-report-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.15);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mgmt-report-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.mgmt-report-purpose {
    margin: 0 0 8px 16px;
    padding: 0;
}

.mgmt-report-purpose li {
    margin-bottom: 2px;
}

.mgmt-report-desc {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(209, 250, 229, 0.7);
    font-size: 12px;
}

.mgmt-report-desc-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.mgmt-report-summary-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    padding: 14px 16px 6px;
}

.mgmt-report-summary-header {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
}

.mgmt-report-summary-table {
    margin-bottom: 0;
    font-size: 12px;
}

.mgmt-report-summary-table thead th {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
}

.mgmt-report-summary-table tbody td {
    vertical-align: top;
}

.mgmt-report-filters {
    margin-top: 18px;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.mgmt-report-filters .filter-group {
    margin-right: 12px;
    margin-bottom: 6px;
}

.mgmt-report-filters label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 2px;
}

.mgmt-report-filters .filter-actions {
    margin-top: 18px;
}

.mgmt-report-body {
    margin-top: 16px;
}

/* Cột tick luôn hiện: chọn 1 hoặc nhiều dòng Project/Task */
.management-report-wrap .mgmt-select-col,
.management-report-wrap .mgmt-select-cell {
    width: 36px;
    min-width: 36px;
    text-align: center;
    vertical-align: middle;
}
.management-report-wrap .mgmt-select-col input,
.management-report-wrap .mgmt-select-cell input {
    margin: 0;
    cursor: pointer;
}

.mgmt-report-row-second {
    margin-top: 18px;
}

.mgmt-report-section-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #111827;
    margin-bottom: 6px;
}

.mgmt-report-table {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.mgmt-report-table thead th {
    background: #f9fafb;
    color: #4b5563;
    font-size: 12px;
}

.mgmt-report-table tbody td {
    font-size: 12px;
}

.mgmt-report-empty {
    background: #ffffff;
    border-radius: 10px;
    padding: 22px;
    text-align: center;
    color: #4b5563;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.mgmt-report-empty i.fa {
    font-size: 26px;
    margin-bottom: 8px;
    color: #0ea5e9;
}

/* ========== Management – Report (Reports module, view=Management) ========== */
body[data-module="Reports"][data-view="Management"] .main-container {
    background: #f3f4f6;
}

.management-report-wrap {
    max-width: 1160px;
    margin: 10px auto 30px;
}

.mgmt-report-hero {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 40%, #0f766e 100%);
    color: #f9fafb;
    border-radius: 14px;
    padding: 18px 22px 18px;
    box-shadow: 0 18px 45px rgba(22, 163, 74, 0.35);
}

.mgmt-report-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.15);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mgmt-report-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.mgmt-report-purpose {
    margin: 0 0 8px 16px;
    padding: 0;
}

.mgmt-report-purpose li {
    margin-bottom: 2px;
}

.mgmt-report-desc {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(209, 250, 229, 0.7);
    font-size: 12px;
}

.mgmt-report-desc-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.mgmt-report-summary-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    padding: 14px 16px 6px;
}

.mgmt-report-summary-header {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
}

.mgmt-report-summary-table {
    margin-bottom: 0;
    font-size: 12px;
}

.mgmt-report-summary-table thead th {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
}

.mgmt-report-summary-table tbody td {
    vertical-align: top;
}

.mgmt-report-filters {
    margin-top: 18px;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.mgmt-report-filters .filter-group {
    margin-right: 12px;
    margin-bottom: 6px;
}

.mgmt-report-filters label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 2px;
}

.mgmt-report-filters .filter-actions {
    margin-top: 18px;
}

.mgmt-report-body {
    margin-top: 16px;
}

.mgmt-report-section-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f172a;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(16,185,129,0.08));
    box-shadow: 0 0 0 1px rgba(148,163,184,0.35);
}

.mgmt-report-table {
    background: radial-gradient(circle at top left, #f9fafb 0%, #ffffff 40%, #eef2ff 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148,163,184,0.35);
    transform-origin: top left;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.mgmt-report-table:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
    border-color: rgba(59,130,246,0.45);
}

.mgmt-report-table thead th {
    background: linear-gradient(90deg, rgba(15,23,42,0.96), rgba(30,64,175,0.96));
    color: #e5e7eb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-color: transparent;
}

.mgmt-report-table tbody td {
    font-size: 12px;
    vertical-align: middle;
}
.mgmt-report-table tbody tr:nth-child(even) td {
    background: rgba(249,250,251,0.9);
}
.mgmt-report-table tbody tr:hover td {
    background: rgba(239,246,255,0.95);
}
.mgmt-report-table a.text-primary {
    color: #2563eb;
    font-weight: 600;
}
.mgmt-report-table a.text-primary:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.mgmt-report-empty {
    background: #ffffff;
    border-radius: 10px;
    padding: 22px;
    text-align: center;
    color: #4b5563;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.mgmt-report-empty i.fa {
    font-size: 26px;
    margin-bottom: 8px;
    color: #0ea5e9;
}

.doc-add-folder-modal .form-group {
    margin-bottom: 20px;
}
.doc-add-folder-modal .form-group .fieldLabel {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
    padding-top: 10px;
}
.doc-add-folder-modal .form-group .redColor {
    color: #ef4444;
}
.doc-add-folder-modal .inputElement,
.doc-add-folder-modal input[type="text"] {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.doc-add-folder-modal .inputElement:focus,
.doc-add-folder-modal input[type="text"]:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}
.doc-add-folder-modal textarea.inputElement {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    resize: vertical;
    min-height: 80px;
}
.doc-add-folder-modal textarea.inputElement:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}
.doc-add-folder-modal .text-muted {
    color: #64748b !important;
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
}
.doc-add-folder-modal .marginTop10px {
    margin-top: 12px;
}
.doc-add-folder-modal .marginTop10px .col-sm-6 {
    padding-left: 8px;
    padding-right: 8px;
}
.doc-add-folder-modal .marginTop10px .col-sm-6:first-child {
    padding-left: 0;
    padding-right: 8px;
}
.doc-add-folder-modal .marginTop10px .col-sm-6:last-child {
    padding-right: 0;
    padding-left: 8px;
}
.doc-add-folder-modal .marginTop10px label.small {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
}
.doc-add-folder-modal .select2-container .select2-selection--multiple {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-height: 80px;
    padding: 6px;
}
.doc-add-folder-modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    color: #1e40af;
}
.doc-add-folder-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #3b82f6;
}
.doc-add-folder-modal .modal-footer {
    padding: 18px 28px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: right;
}
.doc-add-folder-modal .modal-footer center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.doc-add-folder-modal .modal-footer .btn-success {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: all 0.2s ease;
}
.doc-add-folder-modal .modal-footer .btn-success:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.doc-add-folder-modal .modal-footer .cancelLink {
    color: #64748b;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.doc-add-folder-modal .modal-footer .cancelLink:hover {
    color: #1e40af;
    background: #eff6ff;
    text-decoration: none;
}

.document-upload-modal.modelContainer {
    width: 90%;
    max-width: 920px;
}
.document-upload-modal-content {
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;
}
.document-upload-modal .modal-body {
    padding: 24px 28px;
}
.document-upload-dragarea {
    min-height: 220px !important;
    padding: 32px 24px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.document-upload-dragarea:hover,
.document-upload-dragarea.drag-over {
    border-color: var(--doc-primary, #2563eb);
    background: #f0f9ff;
}
.document-upload-drag-title {
    font-size: 1.35rem;
    color: #334155;
    margin-bottom: 8px;
}
.document-upload-drag-title .fa-upload {
    color: var(--doc-primary, #2563eb);
}
.document-upload-or {
    text-transform: uppercase;
    font-size: 12px;
    color: #64748b;
    margin: 12px 0 16px;
}
.document-upload-select-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.document-upload-select-row .fileUploadBtn {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 10px;
}
.document-upload-select-row .fileUploadBtn input[type="file"] {
    font-size: 14px;
    padding: 4px;
}
.document-upload-info-icon {
    color: #64748b;
    font-size: 18px;
}
.document-upload-formats {
    margin-top: 16px;
    font-size: 13px;
    color: #64748b;
}
.document-upload-modal .massEditTable {
    margin-top: 20px;
}
.document-upload-modal .massEditTable .fieldLabel,
.document-upload-modal .massEditTable .fieldValue {
    padding: 10px 12px;
}

@media (max-width: 768px) {
    .doc-management-view {
        flex-direction: column;
    }
    .doc-management-sidebar {
        width: 100%;
        min-width: 0;
        max-height: 200px;
    }
    .doc-management-folder-item:hover {
        transform: none;
    }
}

/* ========== Documents – Neo‑Futuristic (glass + neon) ========== */
body[data-module="Documents"] {
    --doc-neon: #00e5ff;
    --doc-neon-2: #7c3aed;
    --doc-glass: rgba(255, 255, 255, 0.62);
    --doc-glass-2: rgba(255, 255, 255, 0.42);
    --doc-glass-border: rgba(148, 163, 184, 0.32);
}

/* Nền tương lai: gradient + grid nhẹ (không ảnh hưởng module khác) */
body[data-module="Documents"] .main-container #listViewContent.list-view-sidebar-offset {
    position: relative;
    background: radial-gradient(1200px 600px at 14% 8%, rgba(0, 229, 255, 0.14), transparent 55%),
                radial-gradient(900px 520px at 86% 18%, rgba(124, 58, 237, 0.10), transparent 55%),
                linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%) !important;
}
body[data-module="Documents"] .main-container #listViewContent.list-view-sidebar-offset::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(closest-side at 50% 28%, rgba(0,0,0,0.85), transparent 75%);
    opacity: 0.35;
}

/* Khung chính: kính mờ + viền neon nhẹ */
body[data-module="Documents"] .doc-management-view {
    background: var(--doc-glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--doc-glass-border);
    box-shadow: 0 18px 50px rgba(2, 132, 199, 0.14), 0 0 0 1px rgba(14, 165, 233, 0.12);
}
body[data-module="Documents"] .doc-management-view:hover {
    box-shadow: 0 22px 60px rgba(2, 132, 199, 0.18), 0 0 0 1px rgba(0, 229, 255, 0.16);
    border-color: rgba(0, 229, 255, 0.22);
}

/* Sidebar glass */
body[data-module="Documents"] .doc-management-sidebar {
    background: var(--doc-glass-2);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(148, 163, 184, 0.32);
}
body[data-module="Documents"] .doc-management-folder-item {
    border: 1px solid transparent;
}
body[data-module="Documents"] .doc-management-folder-item:hover {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.30);
    box-shadow: 0 12px 26px rgba(2, 132, 199, 0.08);
}
body[data-module="Documents"] .doc-management-folder-item.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(0, 229, 255, 0.10) 100%);
    border-left-color: var(--doc-neon);
    border-color: rgba(0, 229, 255, 0.22);
}

/* Main nền trong suốt để “kính” nổi */
body[data-module="Documents"] .doc-management-main {
    background: transparent;
}

body[data-module="Documents"] .doc-management-toolbar .doc-current-folder-hint {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.26);
    backdrop-filter: blur(10px);
}

/* Table container: glass panel */
body[data-module="Documents"] .doc-management-main .table-container {
    border-radius: 16px;
    border: 1px solid var(--doc-glass-border);
    box-shadow: 0 18px 50px rgba(2, 132, 199, 0.10);
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

/* ========== Documents – Edit/Create view: future + glass ========== */
body[data-module="Documents"] .editViewPageDiv.viewContent {
    background: radial-gradient(1200px 520px at 18% 0%, rgba(0, 229, 255, 0.16), transparent 60%),
                radial-gradient(1000px 520px at 90% 6%, rgba(37, 99, 235, 0.12), transparent 55%),
                linear-gradient(180deg, #eef2ff 0%, #f9fafb 40%, #e2e8f0 100%);
    padding: 32px 0 44px;
}

body[data-module="Documents"] .editViewPageDiv.viewContent .content-area {
    float: none;
    max-width: 1180px;
    margin: 0 auto;
}

body[data-module="Documents"] .editViewPageDiv.viewContent .recordEditView {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(148, 163, 184, 0.40);
    padding: 22px 26px 26px;
    backdrop-filter: blur(16px);
}

/* Edit header: “Creating New Document” */
body[data-module="Documents"] .editViewHeader {
    margin-bottom: 10px;
}
body[data-module="Documents"] .editViewHeader .editHeader {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f172a;
}

/* Block container: Basic Information, Description... */
body[data-module="Documents"] .editViewBody {
    margin-top: 6px;
}
body[data-module="Documents"] .editViewBody .fieldBlockContainer {
    margin-bottom: 20px;
    padding: 18px 22px 14px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(148, 163, 184, 0.35);
}

body[data-module="Documents"] .editViewBody .fieldBlockHeader {
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0f172a;
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body[data-module="Documents"] .editViewBody .fieldBlockHeader::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--doc-primary), var(--doc-accent));
}

body[data-module="Documents"] .editViewBody .fieldBlockContainer > hr {
    margin-top: 4px;
    margin-bottom: 10px;
    border-color: rgba(226, 232, 240, 0.85);
}

/* Labels + fields layout */
body[data-module="Documents"] .editViewBody .table-borderless > tbody > tr > td.fieldLabel {
    width: 26%;
    padding: 8px 14px 8px 4px;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

body[data-module="Documents"] .editViewBody .table-borderless > tbody > tr > td.fieldValue {
    padding: 8px 4px 8px 0;
}

/* Folder Name: tránh lòi ra sát mép, rộng vừa phải */
body[data-module="Documents"] .editViewBody select[name="folderid"] {
    max-width: 240px;
}

/* Inputs, selects, textarea */
body[data-module="Documents"] .editViewBody .inputElement,
body[data-module="Documents"] .editViewBody select,
body[data-module="Documents"] .editViewBody textarea {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

body[data-module="Documents"] .editViewBody .inputElement:focus,
body[data-module="Documents"] .editViewBody select:focus,
body[data-module="Documents"] .editViewBody textarea:focus {
    border-color: var(--doc-primary);
    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.7),
        0 0 0 4px rgba(191, 219, 254, 0.8);
    outline: none;
    background-color: #ffffff;
}

/* CKEditor / Note area */
body[data-module="Documents"] .editViewBody .cke_chrome {
    border-radius: 14px !important;
    border-color: rgba(148, 163, 184, 0.8) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

/* Save / Cancel footer */
body[data-module="Documents"] .modal-overlay-footer {
    border-top: none;
    margin-top: 12px;
    padding-top: 10px;
}

body[data-module="Documents"] .modal-overlay-footer .saveButton {
    min-width: 140px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.6);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 45%, #bbf7d0 100%);
    box-shadow:
        0 12px 28px rgba(22, 163, 74, 0.45),
        0 0 0 1px rgba(22, 163, 74, 0.55);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-module="Documents"] .modal-overlay-footer .saveButton:hover {
    background: linear-gradient(135deg, #16a34a 0%, #16a34a 45%, #86efac 100%);
    box-shadow:
        0 14px 34px rgba(22, 163, 74, 0.6),
        0 0 0 1px rgba(21, 128, 61, 0.95);
}

body[data-module="Documents"] .modal-overlay-footer .cancelLink {
    margin-left: 10px;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ========== Overlay SubTask Detail - đảm bảo nội dung hiển thị ========== */
#overlayPageContent .data {
    min-height: 400px;
    overflow-y: auto;
}
#overlayPageContent.fade.in {
    overflow: auto !important;
}
#overlayPageContent .fc-overlay-modal.overlayDetail {
    min-height: 400px;
    position: relative;
}
#overlayPageContent .overlayDetail .modal-body {
    min-height: 300px;
    padding: 20px;
}

body[data-module="Project"] .project-task-board .comment-box input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
}

/* Ô Related To trên form: input + nút search/add đẹp, đồng bộ với popup */
.editViewContents .referencefield-wrapper .input-group {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fafafa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.editViewContents .referencefield-wrapper .input-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: #fff;
}
.editViewContents .referencefield-wrapper .input-group input.autoComplete,
.editViewContents .referencefield-wrapper .input-group input.inputElement {
    border: none !important;
    background: transparent !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 46px !important;
}
.editViewContents .referencefield-wrapper .input-group .input-group-addon {
    border: none !important;
    background: #f1f5f9 !important;
    padding: 0 14px !important;
    min-width: 46px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.editViewContents .referencefield-wrapper .input-group .input-group-addon.relatedPopup:hover,
.editViewContents .referencefield-wrapper .input-group .input-group-addon.createReferenceRecord:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #fff !important;
}
.editViewContents .referencefield-wrapper .input-group .input-group-addon .fa {
    font-size: 14px;
}
.editViewContents .referencefield-wrapper .input-group .clearReferenceSelection {
    padding: 10px 12px;
    border-radius: 0 12px 12px 0;
    background: #f1f5f9;
    transition: background 0.2s ease;
}
.editViewContents .referencefield-wrapper .input-group .clearReferenceSelection:hover {
    background: #e2e8f0;
}

/* ========== ProjectTask Subtask Detail - taskDetailPanel style (ExtJS-like) ========== */
.projecttask-subtask-detail-view .detailview-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.projecttask-subtask-detail-view .detailview-content .related-tabs {
    order: 2;
    flex: 0 0 380px;
    margin-left: auto;
}
.projecttask-subtask-detail-view .detailview-content .related-tabs .navbar {
    flex-direction: column;
}
.projecttask-subtask-detail-view .detailview-content .related-tabs .nav-tabs {
    flex-direction: column;
    border: none;
}
.projecttask-subtask-detail-view .detailview-content .related-tabs .tab-item {
    border-bottom: 1px solid #e5e7eb;
}
.projecttask-subtask-detail-view .detailview-content .related-tabs .tab-item a {
    padding: 12px 16px;
}
.projecttask-subtask-detail-view .detailview-content .details.row {
    order: 1;
    flex: 1;
    min-width: 0;
}

/* taskDetailToolbar: taskCurrentStage, taskCheckBox, taskComplete, taskIdContainer */
.projecttask-subtask-header.taskDetailToolbar .projecttask-subtask-header-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 3px 0 4px 0;
}
.projecttask-subtask-header .taskCurrentStage {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.projecttask-subtask-header .taskCheckBox {
    width: 18px;
    height: 18px;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.projecttask-subtask-header .taskComplete.checked::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: #22c55e;
}
.projecttask-subtask-header .taskComplete.checked {
    display: inline-block;
}
.projecttask-subtask-header .taskComplete:not(.checked) {
    display: none;
}
.projecttask-subtask-header .taskCheckBox {
    position: relative;
}
.projecttask-subtask-header .taskCompleteTrigger .taskCheckBox {
    border-color: #94a3b8;
}
.projecttask-subtask-header .taskCompleteTrigger .taskCheckBox .taskComplete.checked ~ *,
.projecttask-subtask-header .taskCompleteTrigger:has(.taskComplete.checked) .taskCheckBox {
    border-color: #22c55e;
    background: #dcfce7;
}
.projecttask-subtask-header .stageName {
    font-size: 13px;
    color: #475569;
}
.projecttask-subtask-header .taskIdContainer {
    margin-left: 15px;
}
.projecttask-subtask-header .taskIdinDetail {
    font-size: 13px;
    color: #64748b;
}
.projecttask-subtask-header .taskIdinDetail .fa-angle-down {
    margin-left: 4px;
    font-size: 11px;
}
.projecttask-subtask-header .taskDetailToolbar-fill {
    flex: 1;
}
.projecttask-subtask-header .taskDetailToolbar-actions .dropdown .btn {
    padding: 6px 10px;
}

/* Breadcrumb: tdProjectName, tdListName, breadcrumb */
.projecttask-subtask-header .taskDetailBreadcrumbWrap {
    width: 100%;
    margin: 10px 0 0 0;
}
.projecttask-subtask-header .tdProjectName {
    font-size: 12px;
    color: #475569;
}
.projecttask-subtask-header .tdProjectName .fa-circle {
    margin-right: 6px;
}
.projecttask-subtask-header .tdListName {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.projecttask-subtask-header .tdListName .fa-angle-right {
    margin-right: 6px;
}
.projecttask-subtask-header .taskDetailBreadcrumbWrap .breadcrumb {
    font-size: 12px;
    margin-top: 2px;
}
.projecttask-subtask-header .taskDetailBreadcrumbWrap .breadcrumb .fa-angle-right {
    margin-right: 6px;
}
.projecttask-subtask-header .taskDetailBreadcrumbWrap .taskBack {
    color: #3b82f6;
    text-decoration: underline;
}
.projecttask-subtask-header .titleCardArea.subtask-title {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 8px 0;
}

/* descriptionCardArea, taskDetailDescription */
.projecttask-subtask-detail-view .descriptionCardArea {
    padding: 8px 9px;
    margin: 0 15px 10px 15px;
}
.projecttask-subtask-detail-view .taskDetailDescription .customEmptyText {
    color: #94a3b8;
    font-size: 13px;
}

/* taskDetailFormOuter, detailFieldOuter, smLabelCls, borderLeft */
.projecttask-subtask-detail-view .taskDetailFormOuter {
    margin: 15px 20px 0 25px;
}
.projecttask-subtask-detail-view .detailFieldOuter {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
}
.projecttask-subtask-detail-view .detailFieldOuter .smLabelCls {
    width: 175px;
    flex-shrink: 0;
    font-size: 13px;
    color: #475569;
    margin: 0;
}
.projecttask-subtask-detail-view .detailFieldOuter .smLabelCls i {
    margin-right: 8px;
    color: #64748b;
}
.projecttask-subtask-detail-view .detailFieldOuter .borderLeft {
    flex: 1;
    border-left: 1px solid #e5e7eb;
    padding-left: 15px;
    min-height: 37px;
    display: flex;
    align-items: center;
}
.projecttask-subtask-detail-view .detailFieldOuter .blankFields.lightGray,
.projecttask-subtask-detail-view .detailFieldOuter .mDash.gray {
    color: #94a3b8;
}
.projecttask-subtask-detail-view .detailFieldOuter .multiBlankField .fa-long-arrow-right {
    margin: 0 10px;
    color: #cbd5e1;
}
.projecttask-subtask-detail-view .detailFieldOuter .peopleTagFieldCardOuter .assignee-badge {
    display: inline-block;
}
.projecttask-subtask-detail-view .detailFieldOuter .morePeople.add {
    margin-left: 8px;
    color: #3b82f6;
    cursor: pointer;
}
.projecttask-subtask-detail-view .customFieldOuter.addCustomFieldBtnBg {
    padding: 9px 10px;
    margin-top: 5px;
}
.projecttask-subtask-detail-view .manageBtn.dottedLink {
    border-bottom: 1px dashed;
}
.projecttask-subtask-detail-view .btn-attach-files {
    margin: 15px 20px 0 24px;
}

/* ========== Project Task List: Detail Modal (open from list row) ========== */
.project-task-detail-modal-ui .modal-dialog {
    margin: 20px auto;
}
.project-task-detail-modal-content {
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: none;
}
.project-task-detail-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.project-task-detail-header .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}
.project-task-detail-header .task-status-badge {
    background: #7c3aed;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
}
.project-task-detail-header .task-id-badge {
    color: #64748b;
    font-size: 13px;
}
.project-task-detail-header .header-tabs {
    border: none;
    margin: 0;
    align-items: center;
}
.project-task-detail-header .header-tabs li a {
    border: none;
    color: #64748b;
    padding: 6px 14px;
    border-radius: 6px;
    margin: 0 2px;
}
.project-task-detail-header .header-tabs li.active a,
.project-task-detail-header .header-tabs li a:hover {
    background: #7c3aed;
    color: #fff;
}
.project-task-detail-header .comment-count-badge {
    background: rgba(255,255,255,0.3);
    margin-left: 4px;
}
.project-task-detail-header .modal-close-btn {
    margin-left: 10px;
    font-size: 24px;
    opacity: 0.7;
}
.project-task-detail-body-wrapper {
    padding: 20px;
    /* Cho phần nội dung (bao gồm Subtasks) chiếm hết chiều cao còn lại trong dialog và tự scroll,
       tránh bị che mất phần cuối khi kéo xuống tối đa. */
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
}
.project-task-detail-body .task-breadcrumb {
    margin-bottom: 8px;
}
.project-task-detail-body .task-title-editable {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 600;
}
.project-task-detail-body .task-description-block {
    margin-bottom: 18px;
}
.project-task-detail-body .task-description-block label {
    display: block;
    margin-bottom: 4px;
}
.project-task-detail-body .task-description {
    min-height: 40px;
    padding: 8px 0;
    color: #334155;
}
.project-task-detail-body .task-field-row {
    margin-bottom: 12px;
}
.project-task-detail-body .task-field-row label {
    display: block;
    margin-bottom: 2px;
}
.project-task-detail-body .task-subtasks-block {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}
.project-task-detail-body .task-subtasks-block .input-group {
    margin-bottom: 12px;
}
.project-task-detail-body .project-task-detail-subtasks .subtask-item {
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}
.project-task-detail-sidebar {
    border-left: 1px solid #e5e7eb;
    padding-left: 20px;
}
.project-task-detail-sidebar .comments-pane .project-task-detail-comments {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 15px;
}
.project-task-detail-sidebar .comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}
.project-task-detail-sidebar .comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.project-task-detail-sidebar .comment-body .comment-user {
    font-weight: 600;
    margin-right: 6px;
}
.project-task-detail-sidebar .comment-body .comment-time {
    font-size: 11px;
}
.project-task-detail-sidebar .comment-text {
    margin-top: 4px;
    color: #334155;
}
.project-task-detail-sidebar .add-comment-block textarea {
    margin-bottom: 8px;
    resize: vertical;
}
.project-task-detail-sidebar .add-comment-block .add-comment-btn {
    background: #7c3aed;
    border-color: #7c3aed;
}
.project-task-detail-modal-content .modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 12px 20px;
}
.project-task-detail-modal-content .modal-footer .task-save-btn {
    background: #7c3aed;
    border-color: #7c3aed;
}

/* ========== ProjectTask list: task detail modal (full CSS) ========== */
body[data-module="ProjectTask"] .projecttask-list-task-overlay {
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board {
    width: 100%;
    max-width: 960px;
    flex-shrink: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-modal {
    position: relative;
    display: block;
    background: transparent;
    padding: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-modal.hidden {
    display: none;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-height: calc(100vh - 48px);
    height: 88vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    flex-shrink: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .status-pill.detail-status {
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-id {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .tab-btn {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .tab-btn.active {
    background: #16a34a;
    color: #fff;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .panel-close {
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    margin-left: 4px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .panel-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    padding-bottom: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-left {
    flex: 1;
    padding: 22px 24px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* Chừa khoảng trống phía dưới để khi scroll thấy hết Subtasks, không bị footer Save/Cancel che mất */
    padding-bottom: 80px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-left > * {
    flex-shrink: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-right {
    width: 320px;
    min-width: 300px;
    border-left: 1px solid #e5e7eb;
    padding: 18px 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-breadcrumb {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
    line-height: 1.3;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-section {
    margin-bottom: 18px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .section-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 14px;
    display: block;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-description {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-description:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    gap: 12px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row:last-child {
    border-bottom: none;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row .label {
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row .value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table input,
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    max-width: 100%;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table input:focus,
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-table select:focus {
    outline: none;
    border-color: #16a34a;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-dates {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .date-sep {
    color: #94a3b8;
    font-size: 12px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .progress-suffix {
    margin-left: 4px;
    color: #64748b;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-link {
    color: #16a34a;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-link:hover {
    text-decoration: underline;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .detail-subtasks.board-subtasks-block {
    margin-top: 18px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .tasksListToolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .quickAddTaskInput {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .quickAddTaskInput:focus {
    outline: none;
    border-color: #16a34a;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtask-save-btn {
    flex-shrink: 0;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 13px;
    background: #16a34a;
    border: none;
    color: #fff;
    cursor: pointer;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtask-save-btn:hover {
    background: #15803d;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.15s;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list-row:hover {
    background: #f1f5f9;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #334155;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-title.task-done {
    text-decoration: line-through;
    color: #94a3b8;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-assignee-wrap .task-assignee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    font-size: 11px;
    font-weight: 600;
    background: #16a34a;
    color: #fff;
    border-radius: 8px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list-empty {
    color: #94a3b8;
    font-size: 13px;
    padding: 16px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    margin-top: 8px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-wrap {
    position: relative;
    flex-shrink: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-trigger:hover {
    background: #dcfce7;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.backlog {
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: transparent;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.inprogress {
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: linear-gradient(90deg, #94a3b8 50%, transparent 50%);
    background-origin: border-box;
    box-sizing: border-box;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.complete {
    border: none;
    border-radius: 50%;
    background: #22c55e;
    position: relative;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.complete::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 6px 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-dropdown.hidden {
    display: none !important;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option:hover {
    background: #f1f5f9;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option .subtask-status-icon {
    width: 16px;
    height: 16px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option .subtask-status-icon.complete::after {
    left: 4px;
    top: 1px;
    width: 3px;
    height: 6px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option.subtask-status-option-selected {
    background: #dcfce7;
    color: #15803d;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .ann-detail-tabs {
    margin-bottom: 14px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comments-badge {
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board #task-panel-comments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board #task-panel-comments-list .ann-add-comment {
    flex-shrink: 0;
    margin-top: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comments-list {
    flex-shrink: 0;
    margin-bottom: 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-item {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-item:last-of-type {
    border-bottom: none;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-avatar {
    flex-shrink: 0;
    background: #dc2626;
    color: #fff;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-meta {
    font-size: 12px;
    color: #64748b;
    width: 100%;
    margin-left: 40px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    margin-left: 40px;
    width: calc(100% - 40px);
    font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-attachments {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-file-link {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-file-link:hover {
    text-decoration: underline;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-emoji-btn,
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-upload-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-emoji-btn:hover,
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-upload-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-file-name {
    font-size: 12px;
    color: #64748b;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-file-name.hidden {
    display: none !important;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-emoji-picker {
    position: absolute;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 260px;
    z-index: 50;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-emoji-picker.hidden {
    display: none !important;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-emoji-item {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-emoji-item:hover {
    background: #f1f5f9;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .ann-add-comment {
    position: relative;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    resize: vertical;
    min-height: 70px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-add {
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 13px;
    background: #16a34a;
    border: none;
    color: #fff;
    cursor: pointer;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-comment-add:hover {
    background: #15803d;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-panel.hide {
    display: none !important;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-history-empty {
    font-size: 13px;
    color: #94a3b8;
    padding: 16px 0;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-footer {
    flex-shrink: 0;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-footer .detail-save {
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 14px;
    background: #16a34a;
    border: none;
    color: #fff;
    cursor: pointer;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-footer .detail-save:hover {
    background: #15803d;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-footer .detail-cancel {
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
body[data-module="ProjectTask"] .projecttask-list-task-overlay .project-task-board .task-detail-footer .detail-cancel:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Task modal when opened from Reports (reuse ProjectTask List popup style) */
body[data-module="Reports"] .projecttask-list-task-overlay {
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board {
    width: 100%;
    max-width: 960px;
    flex-shrink: 0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-modal {
    position: relative;
    display: block;
    background: transparent;
    padding: 0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-modal.hidden {
    display: none;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-height: calc(100vh - 48px);
    height: 88vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    flex-shrink: 0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .status-pill.detail-status {
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-id {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .tab-btn {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .tab-btn.active {
    background: #16a34a;
    color: #fff;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .panel-close {
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    margin-left: 4px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .panel-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    padding-bottom: 0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-left {
    flex: 1;
    padding: 22px 24px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-left > * {
    flex-shrink: 0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-right {
    width: 340px;
    min-width: 300px;
    border-left: 1px solid #e5e7eb;
    padding: 20px 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-breadcrumb {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-section {
    margin-bottom: 20px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .section-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
    font-size: 14px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-description {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-description:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row:last-child {
    border-bottom: none;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row .label {
    color: #64748b;
    margin-right: 10px;
    min-width: 120px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table .detail-row .value {
    flex: 1;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table input,
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table select {
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table input:focus,
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-table select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .date-sep {
    color: #94a3b8;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .progress-suffix {
    margin-left: 6px;
    color: #64748b;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-link {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-link:hover {
    text-decoration: underline;
    color: #4f46e5;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .detail-subtasks.board-subtasks-block {
    margin-top: 4px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .tasksListToolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .quickAddTaskInput {
    flex: 1;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    font-size: 13px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .quickAddTaskInput:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .board-subtask-save-btn {
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    background: #16a34a;
    border: none;
    color: #fff;
    font-weight: 600;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .board-subtask-save-btn:hover {
    background: #15803d;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f8fafc;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list-row:hover {
    background: #e5f3ff;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-title {
    font-size: 13px;
    color: #0f172a;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-title.task-done {
    text-decoration: line-through;
    color: #94a3b8;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-assignee-wrap .task-assignee {
    font-size: 12px;
    color: #64748b;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .task-list-empty {
    font-size: 13px;
    color: #94a3b8;
    padding: 12px 0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-trigger {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-trigger:hover {
    background: #f1f5f9;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.backlog {
    background: #e5e7eb;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.inprogress {
    background: #38bdf8;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.complete {
    background: #22c55e;
    position: relative;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-icon.complete::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid #bbf7d0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-dropdown {
    position: absolute;
    z-index: 100;
    margin-top: 4px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
    padding: 6px;
    min-width: 180px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-dropdown.hidden {
    display: none;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #0f172a;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option:hover {
    background: #f1f5f9;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option .subtask-status-icon {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option .subtask-status-icon.complete::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid #bbf7d0;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .board-subtasks-block .subtask-status-option.subtask-status-option-selected {
    background: #ecfeff;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .ann-detail-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-comments-badge {
    margin-left: 4px;
    background: #e5e7eb;
    color: #374151;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board #task-panel-comments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 10px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board #task-panel-comments-list .ann-add-comment {
    margin-top: 10px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body[data-module="Reports"] .projecttask-list-task-overlay .project-task-board .task-detail-panel .ann-comment-item {
    padding: 8px 10px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ========== HelpDesk / Tickets – modern futuristic UI ========== */

/* List + Detail wrapper background */
body[data-module="HelpDesk"] .tickets-modern-wrapper,
body[data-module="HelpDesk"] .tickets-detail-wrapper {
    background: radial-gradient(circle at top left, #f9fafb 0%, #e5e7eb 40%, #eef2ff 100%);
    margin-top: 76px;
    padding-top: 8px;
    padding-bottom: 16px;
}

/* Filter sidebar card */
body[data-module="HelpDesk"] .tickets-filter-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.20);
    background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,64,175,0.98));
    color: #e5e7eb;
}
body[data-module="HelpDesk"] .tickets-filter-card .panel-heading {
    background: transparent;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
body[data-module="HelpDesk"] .tickets-filter-card .panel-title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    color: #bfdbfe;
}
body[data-module="HelpDesk"] .tickets-filter-card label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cbd5f5;
}
body[data-module="HelpDesk"] .tickets-filter-card .form-control {
    border-radius: 999px;
    border-color: rgba(148, 163, 184, 0.6);
    background: rgba(15,23,42,0.9);
    color: #e5e7eb;
}
body[data-module="HelpDesk"] .tickets-filter-card .btn-primary {
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #22c55e);
    border: none;
    font-weight: 600;
    letter-spacing: 0.08em;
}
body[data-module="HelpDesk"] .tickets-filter-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.55);
}

/* Stat cards */
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card {
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card .value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .value .prio {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    margin-right: 4px;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-critical { background:#fee2e2;color:#b91c1c;}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-high { background:#ffedd5;color:#c2410c;}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-medium { background:#e0f2fe;color:#075985;}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-low { background:#dcfce7;color:#166534;}

/* Tickets table */
body[data-module="HelpDesk"] .tickets-table-panel {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
body[data-module="HelpDesk"] .tickets-table-panel .panel-heading {
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #e5e7eb;
}
body[data-module="HelpDesk"] .tickets-table-panel .panel-title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
}
body[data-module="HelpDesk"] .tickets-table-panel .btn-success {
    border-radius: 999px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    font-weight: 600;
}
body[data-module="HelpDesk"] .tickets-table-panel .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(34,197,94,0.55);
}
body[data-module="HelpDesk"] .tickets-table tbody tr:hover {
    background: rgba(239, 246, 255, 0.8);
}
body[data-module="HelpDesk"] .tickets-table .ticket-code-link {
    font-weight: 600;
    color: #1d4ed8;
}
body[data-module="HelpDesk"] .tickets-table .ticket-code-link:hover {
    text-decoration: underline;
}

/* Priority & Status badges */
body[data-module="HelpDesk"] .badge-priority {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
}
body[data-module="HelpDesk"] .badge-priority-critical { background:#fee2e2;color:#b91c1c;}
body[data-module="HelpDesk"] .badge-priority-high { background:#ffedd5;color:#c2410c;}
body[data-module="HelpDesk"] .badge-priority-medium { background:#e0f2fe;color:#0369a1;}
body[data-module="HelpDesk"] .badge-priority-low { background:#dcfce7;color:#166534;}

body[data-module="HelpDesk"] .badge-status {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
}
body[data-module="HelpDesk"] .badge-status-open { background:#eef2ff;color:#3730a3;}
body[data-module="HelpDesk"] .badge-status-in_progress { background:#dcfce7;color:#073B3A;}
body[data-module="HelpDesk"] .badge-status-resolved { background:#dcfce7;color:#166534;}
body[data-module="HelpDesk"] .badge-status-closed { background:#e5e7eb;color:#111827;}

/* SLA badge pulse when overdue */
body[data-module="HelpDesk"] .sla-badge {
    display:inline-block;
    font-size: 10px;
    padding: 3px 8px;
    border-radius:999px;
    background:#e0f2fe;
    color:#075985;
}
body[data-module="HelpDesk"] .sla-badge.sla-overdue {
    background:#fee2e2;
    color:#b91c1c;
    box-shadow:0 0 0 0 rgba(248,113,113,0.7);
    animation:sla-pulse 1.2s infinite;
}
@keyframes sla-pulse {
    0% { box-shadow:0 0 0 0 rgba(248,113,113,0.7);}
    70%{ box-shadow:0 0 0 8px rgba(248,113,113,0);}
    100%{ box-shadow:0 0 0 0 rgba(248,113,113,0);}
}

/* ========== HelpDesk Tickets – Detail view (futuristic style) ========== */

/* Nền tổng cho khu detail */
body[data-module="HelpDesk"] .tickets-detail-wrapper {
  background:
    radial-gradient(circle at top left, rgba(129,140,248,0.16) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(45,212,191,0.18) 0, transparent 60%),
    linear-gradient(180deg,#f9fafb 0,#e5e7eb 40%,#eef2ff 100%);
  padding: 140px 18px 22px;
}

/* MAIN COLUMN */
body[data-module="HelpDesk"] .tickets-detail-main {
  padding-right: 10px;
}

/* HEADER: CODE + SUBJECT + META + BADGES – FUTURISTIC GLASS CARD */
body[data-module="HelpDesk"] .tickets-detail-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:18px 24px;
  margin-bottom:20px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(94,234,212,0.25) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129,140,248,0.30) 0, transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,64,175,0.96));
  box-shadow:
    0 24px 55px rgba(15,23,42,0.75),
    0 0 0 1px rgba(148,163,184,0.55);
  color:#e5e7eb;
  backdrop-filter:blur(20px);
}
body[data-module="HelpDesk"] .tickets-detail-header::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 10% 0%, rgba(248,250,252,0.40) 0, transparent 45%),
    radial-gradient(circle at 100% 80%, rgba(56,189,248,0.30) 0, transparent 45%);
  opacity:0.9;
}
body[data-module="HelpDesk"] .tickets-detail-header > .left-block,
body[data-module="HelpDesk"] .tickets-detail-header > .right-block{
  position:relative;
  z-index:1;
}
body[data-module="HelpDesk"] .tickets-detail-header .ticket-code{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#e5e7eb;
  background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(79,70,229,1));
  box-shadow:0 8px 18px rgba(15,23,42,0.75);
}
body[data-module="HelpDesk"] .tickets-detail-header .ticket-subject{
  margin-top:10px;
  font-size:26px;
  font-weight:700;
  letter-spacing:.01em;
  color:#f9fafb;
  text-shadow:0 10px 25px rgba(15,23,42,0.7);
}
body[data-module="HelpDesk"] .tickets-detail-header .ticket-meta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
body[data-module="HelpDesk"] .tickets-detail-header .ticket-meta .meta-item{
  font-size:11px;
  color:#e5e7eb;
  opacity:.95;
}
body[data-module="HelpDesk"] .tickets-detail-header .ticket-meta .label{
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#c7d2fe;
  opacity:.9;
  margin-right:4px;
}
body[data-module="HelpDesk"] .tickets-detail-header .badge{
  position:relative;
  z-index:1;
}
body[data-module="HelpDesk"] .tickets-detail-header .right-block{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
body[data-module="HelpDesk"] .tickets-detail-header .right-block .badge{
  border-radius:999px;
  padding:6px 14px;
  font-size:11px;
  box-shadow:0 10px 24px rgba(15,23,42,0.7);
}

/* TABS – Overview / Activity / Files / Time Logs (simple, flat – no heavy effects) */
body[data-module="HelpDesk"] .tickets-detail-tabs{
  margin-top:16px;
  border-bottom:1px solid rgba(148,163,184,0.35);
  display:flex;
  gap:0;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-module="HelpDesk"] .tickets-detail-tabs>li{
  float:none;
  margin:0 !important;
}
body[data-module="HelpDesk"] .tickets-detail-tabs>li>a{
  position:relative;
  border:none !important;
  border-radius:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  padding:10px 18px;
  height:auto;
  line-height:1;
  white-space:nowrap;
  font-weight:600;
  color:#6b7280;
  background:transparent;
  box-shadow:none;
  transition:none;
}
body[data-module="HelpDesk"] .tickets-detail-tabs>li>a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#6366f1,#22c55e);
  opacity:0;
}
body[data-module="HelpDesk"] .tickets-detail-tabs>li>a:hover{
  color:#111827;
  background:transparent;
}
body[data-module="HelpDesk"] .tickets-detail-tabs>li.active>a,
body[data-module="HelpDesk"] .tickets-detail-tabs>li.active>a:focus,
body[data-module="HelpDesk"] .tickets-detail-tabs>li.active>a:hover{
  color:#111827;
  background:transparent;
}
body[data-module="HelpDesk"] .tickets-detail-tabs>li.active>a::after{
  opacity:1;
}

body[data-module="HelpDesk"] .tickets-detail-tab-content{
  margin-top:16px;
}

/* OVERVIEW / FILES / TIME CARDS – glass panels */
body[data-module="HelpDesk"] #ticket-overview .panel,
body[data-module="HelpDesk"] #ticket-files .panel,
body[data-module="HelpDesk"] #ticket-time .panel{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 18px 40px rgba(15,23,42,.32);
  background:
    radial-gradient(circle at 0% 0%,rgba(248,250,252,0.95) 0,rgba(239,246,255,0.98) 40%,rgba(224,231,255,0.98) 100%);
}
body[data-module="HelpDesk"] #ticket-overview .panel-heading,
body[data-module="HelpDesk"] #ticket-files .panel-heading,
body[data-module="HelpDesk"] #ticket-time .panel-heading{
  border-bottom:1px solid rgba(148,163,184,.55);
  background:linear-gradient(135deg,#eff6ff,#e0f2fe);
}
body[data-module="HelpDesk"] #ticket-overview .panel-title,
body[data-module="HelpDesk"] #ticket-files .panel-title,
body[data-module="HelpDesk"] #ticket-time .panel-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#475569;
}

/* ACTIVITY TIMELINE as CARDS – futuristic chips */
body[data-module="HelpDesk"] .tickets-activity-timeline{
  margin:0;
  padding:0;
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item{
  position:relative;
  padding:8px 12px 8px 24px;
  margin-bottom:10px;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 32px rgba(15,23,42,.26);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  width:3px;
  height:72%;
  background:linear-gradient(180deg,#6366f1,#22c55e);
  opacity:.9;
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item:hover{
  background:rgba(248,250,252,1);
  box-shadow:0 18px 40px rgba(15,23,42,.32);
  transform:translateY(-1px);
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item .time{
  font-size:11px;
  color:#6b7280;
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item .main .user{
  font-weight:600;
  color:#111827;
  margin-right:6px;
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item .main .action{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:#eef2ff;
  color:#4338ca;
}
body[data-module="HelpDesk"] .tickets-activity-timeline .timeline-item .values{
  margin-top:3px;
  font-size:11px;
  color:#4b5563;
  word-break:break-all;
}

/* ========== SUPPORT RULES – LIST & EDIT PAGES ========== */

body[data-module="HelpDesk"] .support-rules-wrapper {
  padding:18px 20px;
}
body[data-module="HelpDesk"] .support-rules-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
body[data-module="HelpDesk"] .support-rules-header .title{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}
body[data-module="HelpDesk"] .support-rules-header .subtitle{
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}
body[data-module="HelpDesk"] .support-rules-panel{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 12px 30px rgba(15,23,42,.18);
}
body[data-module="HelpDesk"] .support-rules-panel>.panel-heading{
  border-bottom:1px solid rgba(148,163,184,.35);
  background:linear-gradient(135deg,#eff6ff,#e0f2fe);
}
body[data-module="HelpDesk"] .support-rules-panel .panel-title{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#475569;
}
body[data-module="HelpDesk"] .support-rules-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  border-bottom:none;
}
body[data-module="HelpDesk"] .support-rules-table td{
  font-size:12px;
  vertical-align:middle !important;
}
body[data-module="HelpDesk"] .support-rules-table tbody tr:hover{
  background:rgba(129,140,248,0.04);
}
body[data-module="HelpDesk"] .support-rules-table .badge-rule-type{
  background:#e0f2fe;
  color:#075985;
  border-radius:999px;
  font-size:10px;
  padding:3px 8px;
}

/* FILES / TIME TABLES */
body[data-module="HelpDesk"] #ticket-files table,
body[data-module="HelpDesk"] #ticket-time table{
  margin-bottom:0;
}
body[data-module="HelpDesk"] #ticket-files thead tr,
body[data-module="HelpDesk"] #ticket-time thead tr{
  background:linear-gradient(135deg,#0f172a,#1f2937);
  color:#e5e7eb;
}
body[data-module="HelpDesk"] #ticket-files th,
body[data-module="HelpDesk"] #ticket-time th{
  border:none !important;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
body[data-module="HelpDesk"] #ticket-files tbody tr:hover,
body[data-module="HelpDesk"] #ticket-time tbody tr:hover{
  background:rgba(129,140,248,0.06);
}

/* ------------------------------------------------------------
 * APP MENU – giữ vị trí nhưng không ép hiển thị (tránh trùng menu ngang)
 * ------------------------------------------------------------ */
body[data-module="HelpDesk"] #app-menu {
  left: 0 !important;
  top: 134px !important;
  z-index: 99999 !important;
  position: fixed !important;
}

/* Khoảng hở để nội dung không bị che bởi thanh nav/menu */
body[data-app="SUPPORT"] .main-container,
body[data-module="HelpDesk"] .main-container,
body[data-module="Rules"] .main-container {
  padding-top: 170px !important;
}

/* Rule page wrapper spacing */
body[data-module="HelpDesk"] .support-rules-wrapper {
  padding-top: 16px;
}

/* RIGHT SIDE CARDS: Assignments / SLA / Status & Time */
body[data-module="HelpDesk"] .tickets-detail-side .panel{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.5);
  box-shadow:0 12px 30px rgba(15,23,42,.20);
}
body[data-module="HelpDesk"] .tickets-detail-side .panel-heading{
  background:linear-gradient(135deg,#eff6ff,#ede9fe);
  border-bottom:1px solid rgba(148,163,184,.4);
}
body[data-module="HelpDesk"] .tickets-detail-side .panel-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#475569;
}


/* ========== Project & ProjectTask – căn giữa header + nút trong app-nav (theo AI) ========== */

/* Breadcrumb Project(s) > All – đồng bộ chiều cao với khối nút bên phải */
body[data-module="Project"] .app-nav .col-lg-7.col-md-6.col-sm-5.col-xs-11.padding0.module-breadcrumb.module-breadcrumb-List.transitionsAllHalfSecond,
body[data-module="ProjectTask"] .app-nav .col-lg-7.col-md-6.col-sm-5.col-xs-11.padding0.module-breadcrumb.module-breadcrumb-List.transitionsAllHalfSecond {
    height: 62px;
}

/* Khối module-action-bar (bọc breadcrumb + nút) thành flex để căn giữa dọc */
body[data-module="Project"] .app-nav .col-sm-11.col-xs-10.padding0.module-action-bar.clearfix.coloredBorderTop,
body[data-module="ProjectTask"] .app-nav .col-sm-11.col-xs-10.padding0.module-action-bar.clearfix.coloredBorderTop {
    display: flex !important;
    align-items: center !important;
}

/* Nội dung bên trong (breadcrumb + nhóm nút) – flex, căn 2 đầu, có gap */
body[data-module="Project"] .app-nav .module-action-content.clearfix.Project-module-action-content,
body[data-module="ProjectTask"] .app-nav .module-action-content.clearfix.Project-module-action-content {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --doc-primary: #2563eb;
    --doc-primary-dark: #1d4ed8;
    --doc-primary-light: #3b82f6;
    --doc-accent: #0ea5e9;
    --doc-bg-sidebar: #fafbfc;
    --doc-bg-main: #ffffff;
    --doc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --doc-shadow: 0 4px 12px rgba(0,0,0,0.06);
    --doc-shadow-hover: 0 8px 24px rgba(0,0,0,0.08);
    --doc-radius: 12px;
    --doc-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    font-family: "Times New Roman", Times, serif !important;
    box-sizing: inherit;
    background: linear-gradient(180deg, #fbfbfb 0%, #ffffff 100%);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: center;
}

/* Cột bên phải (chứa #appnav + nút) – tự căn giữa trong hàng + các con căn giữa dọc */
body[data-module="Project"] .app-nav .col-lg-5.col-md-6.col-sm-7.col-xs-1.padding0.pull-right,
body[data-module="ProjectTask"] .app-nav .col-lg-5.col-md-6.col-sm-7.col-xs-1.padding0.pull-right {
    align-items: center;
    align-self: center;
}

/* Khối #appnav – đảm bảo item bên trong căn giữa dọc */
body[data-module="Project"] .app-nav div#appnav,
body[data-module="ProjectTask"] .app-nav div#appnav {
    align-items: center;
}

/* Nav bên trong #appnav – bỏ margin dư, tự căn giữa */
body[data-module="Project"] .app-nav div#appnav > nav.navbar.navbar-inverse.border0.margin0,
body[data-module="ProjectTask"] .app-nav div#appnav > nav.navbar.navbar-inverse.border0.margin0 {
    margin-bottom: 0px;
    align-self: center;
}

/* Nút trong #appnav: icon + text căn giữa dọc/ngang */
body[data-module="Project"] .app-nav div#appnav button,
body[data-module="Project"] .app-nav div#appnav a[class*="btn"],
body[data-module="Project"] .app-nav div#appnav div[role="button"],
body[data-module="Project"] .app-nav div#appnav div.btn,
body[data-module="ProjectTask"] .app-nav div#appnav button,
body[data-module="ProjectTask"] .app-nav div#appnav a[class*="btn"],
body[data-module="ProjectTask"] .app-nav div#appnav div[role="button"],
body[data-module="ProjectTask"] .app-nav div#appnav div.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Icon trong nút – tinh chỉnh lệch 1px cho đẹp mắt */
body[data-module="Project"] .app-nav div#appnav button i,
body[data-module="Project"] .app-nav div#appnav button span[class*="fa"],
body[data-module="Project"] .app-nav div#appnav button svg,
body[data-module="Project"] .app-nav div#appnav a[class*="btn"] i,
body[data-module="Project"] .app-nav div#appnav a[class*="btn"] span[class*="fa"],
body[data-module="Project"] .app-nav div#appnav a[class*="btn"] svg,
body[data-module="Project"] .app-nav div#appnav div[role="button"] i,
body[data-module="Project"] .app-nav div#appnav div[role="button"] span[class*="fa"],
body[data-module="Project"] .app-nav div#appnav div[role="button"] svg,
body[data-module="Project"] .app-nav div#appnav div.btn i,
body[data-module="Project"] .app-nav div#appnav div.btn span[class*="fa"],
body[data-module="Project"] .app-nav div#appnav div.btn svg,
body[data-module="ProjectTask"] .app-nav div#appnav button i,
body[data-module="ProjectTask"] .app-nav div#appnav button span[class*="fa"],
body[data-module="ProjectTask"] .app-nav div#appnav button svg,
body[data-module="ProjectTask"] .app-nav div#appnav a[class*="btn"] i,
body[data-module="ProjectTask"] .app-nav div#appnav a[class*="btn"] span[class*="fa"],
body[data-module="ProjectTask"] .app-nav div#appnav a[class*="btn"] svg,
body[data-module="ProjectTask"] .app-nav div#appnav div[role="button"] i,
body[data-module="ProjectTask"] .app-nav div#appnav div[role="button"] span[class*="fa"],
body[data-module="ProjectTask"] .app-nav div#appnav div[role="button"] svg,
body[data-module="ProjectTask"] .app-nav div#appnav div.btn i,
body[data-module="ProjectTask"] .app-nav div#appnav div.btn span[class*="fa"],
body[data-module="ProjectTask"] .app-nav div#appnav div.btn svg {
    vertical-align: middle;
    transform: translateY(1px);
}

/* ========== HelpDesk / Tickets – modern futuristic UI ========== */

/* List + Detail wrapper background */
body[data-module="HelpDesk"] .tickets-modern-wrapper,
body[data-module="HelpDesk"] .tickets-detail-wrapper {
    background: radial-gradient(circle at top left, #f9fafb 0%, #e5e7eb 40%, #eef2ff 100%);
    padding-top: 8px;
    padding-bottom: 16px;
}

/* Filter sidebar card */
body[data-module="HelpDesk"] .tickets-filter-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.20);
    background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,64,175,0.98));
    color: #e5e7eb;
}
body[data-module="HelpDesk"] .tickets-filter-card .panel-heading {
    background: transparent;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}
body[data-module="HelpDesk"] .tickets-filter-card .panel-title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    color: #bfdbfe;
}
body[data-module="HelpDesk"] .tickets-filter-card label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cbd5f5;
}
body[data-module="HelpDesk"] .tickets-filter-card .form-control {
    border-radius: 999px;
    border-color: rgba(148, 163, 184, 0.6);
    background: rgba(15,23,42,0.9);
    color: #e5e7eb;
}
body[data-module="HelpDesk"] .tickets-filter-card .btn-primary {
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #22c55e);
    border: none;
    font-weight: 600;
    letter-spacing: 0.08em;
}
body[data-module="HelpDesk"] .tickets-filter-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.55);
}

/* Stat cards */
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card {
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card .value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .value .prio {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    margin-right: 4px;
}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-critical { background:#fee2e2;color:#b91c1c;}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-high { background:#ffedd5;color:#c2410c;}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-medium { background:#e0f2fe;color:#075985;}
body[data-module="HelpDesk"] .tickets-stats-row .tickets-stat-priority .prio-low { background:#dcfce7;color:#166534;}

/* Tickets table */
body[data-module="HelpDesk"] .tickets-table-panel {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
body[data-module="HelpDesk"] .tickets-table-panel .panel-heading {
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #e5e7eb;
}
body[data-module="HelpDesk"] .tickets-table-panel .panel-title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
}
body[data-module="HelpDesk"] .tickets-table-panel .btn-success {
    border-radius: 999px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    font-weight: 600;
}
body[data-module="HelpDesk"] .tickets-table-panel .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(34,197,94,0.55);
}
body[data-module="HelpDesk"] .tickets-table tbody tr:hover {
    background: rgba(239, 246, 255, 0.8);
}
body[data-module="HelpDesk"] .tickets-table .ticket-code-link {
    font-weight: 600;
    color: #1d4ed8;
}
body[data-module="HelpDesk"] .tickets-table .ticket-code-link:hover {
    text-decoration: underline;
}

/* Priority & Status badges */
body[data-module="HelpDesk"] .badge-priority {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
}
body[data-module="HelpDesk"] .badge-priority-critical { background:#fee2e2;color:#b91c1c;}
body[data-module="HelpDesk"] .badge-priority-high { background:#ffedd5;color:#c2410c;}
body[data-module="HelpDesk"] .badge-priority-medium { background:#e0f2fe;color:#0369a1;}
body[data-module="HelpDesk"] .badge-priority-low { background:#dcfce7;color:#166534;}

body[data-module="HelpDesk"] .badge-status {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
}
body[data-module="HelpDesk"] .badge-status-open { background:#eef2ff;color:#3730a3;}
body[data-module="HelpDesk"] .badge-status-in_progress { background:#dcfce7;color:#073B3A;}
body[data-module="HelpDesk"] .badge-status-resolved { background:#dcfce7;color:#166534;}
body[data-module="HelpDesk"] .badge-status-closed { background:#e5e7eb;color:#111827;}

/* SLA badge pulse when overdue */
body[data-module="HelpDesk"] .sla-badge {
    display:inline-block;
    font-size: 10px;
    padding: 3px 8px;
    border-radius:999px;
    background:#e0f2fe;
    color:#075985;
}
body[data-module="HelpDesk"] .sla-badge.sla-overdue {
    background:#fee2e2;
    color:#b91c1c;
    box-shadow:0 0 0 0 rgba(248,113,113,0.7);
    animation:sla-pulse 1.2s infinite;
}
@keyframes sla-pulse {
    0% { box-shadow:0 0 0 0 rgba(248,113,113,0.7);}
    70%{ box-shadow:0 0 0 8px rgba(248,113,113,0);}
    100%{ box-shadow:0 0 0 0 rgba(248,113,113,0);}
}

/* Detail header and tabs */
/* (old simple header styles for HelpDesk detail header were here – replaced by futuristic card above) */

/* ========== ACTIVITIES (placeholder) – ép hiện menu + thanh nav ========= */
body[data-module="Activities"] #app-menu,
body[data-module="Activities"] .app-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    top: 157px !important;
    left: 0 !important;
}
body[data-module="Activities"] .container-fluid.app-nav {
    position: fixed;
    top: 118px;
    left: 0;
    width: 100%;
    z-index: 99998;
    padding: 8px 14px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, rgba(248,250,252,0.96), rgba(226,232,240,0.96));
    border: none !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.10);
}
body[data-module="Activities"] .app-nav .module-action-bar {
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
}
body[data-module="Activities"] .app-nav .row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}
body[data-module="Activities"] .app-nav .module-action-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 16px !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-module="Activities"] .app-nav .module-action-content > .pull-right {
    margin-left: auto !important;
}

/* ========= ACTIVITIES FUTURISTIC UI ========= */
body[data-module="Activities"] .activities-page {
    padding-top: 16px !important;
}
body[data-module="Activities"] .activities-card {
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,41,59,0.92)) !important;
    box-shadow: 0 18px 35px rgba(2,6,23,0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    overflow: hidden;
}
body[data-module="Activities"] .activities-card .panel-heading {
    background: linear-gradient(90deg, rgba(59,130,246,0.25), rgba(168,85,247,0.22)) !important;
    border-bottom: 1px solid rgba(148,163,184,0.22) !important;
}
body[data-module="Activities"] .activities-card .panel-title {
    color: #eef2ff !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body[data-module="Activities"] .activities-card .panel-body {
    color: #e2e8f0;
}
body[data-module="Activities"] .activities-filter-form .form-group {
    margin-right: 8px;
    margin-bottom: 8px;
}
body[data-module="Activities"] .activities-filter-form label {
    color: #cbd5e1;
    font-size: 11px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-module="Activities"] .activities-filter-form .form-control {
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(99,102,241,0.35);
    color: #e2e8f0;
    border-radius: 10px;
}
body[data-module="Activities"] .activities-filter-form .btn-primary,
body[data-module="Activities"] .activities-edit-wrapper .btn-primary,
body[data-module="Activities"] .activities-detail-wrapper .btn-primary {
    border: none !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    box-shadow: 0 10px 24px rgba(59,130,246,0.35);
}
body[data-module="Activities"] .activities-filter-form .btn-default,
body[data-module="Activities"] .activities-detail-wrapper .btn-default {
    border-radius: 999px !important;
    border: 1px solid rgba(148,163,184,0.35) !important;
    background: rgba(15,23,42,0.45) !important;
    color: #e2e8f0 !important;
}
body[data-module="Activities"] .activities-filter-form .btn-link {
    color: #93c5fd !important;
}
body[data-module="Activities"] .activities-table thead th {
    background: linear-gradient(90deg, rgba(30,41,59,0.95), rgba(17,24,39,0.95)) !important;
    color: #c7d2fe !important;
    border-color: rgba(71,85,105,0.6) !important;
    font-size: 11px;
    text-transform: uppercase;
}
body[data-module="Activities"] .activities-table tbody td {
    border-color: rgba(71,85,105,0.45) !important;
    background: rgba(15,23,42,0.35);
}
body[data-module="Activities"] .activities-table tbody tr:hover td {
    background: rgba(30,41,59,0.72) !important;
}
body[data-module="Activities"] .activities-table a {
    color: #93c5fd;
}
body[data-module="Activities"] .activities-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
body[data-module="Activities"] .activities-status-scheduled {
    background: rgba(59,130,246,0.18);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.45);
}
body[data-module="Activities"] .activities-status-ready {
    background: rgba(250,204,21,0.2);
    color: #fcd34d;
    box-shadow: inset 0 0 0 1px rgba(250,204,21,0.45);
}
body[data-module="Activities"] .activities-status-completed {
    background: rgba(16,185,129,0.2);
    color: #6ee7b7;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.45);
}
body[data-module="Activities"] .activities-status-skipped {
    background: rgba(244,63,94,0.18);
    color: #fda4af;
    box-shadow: inset 0 0 0 1px rgba(244,63,94,0.45);
}

/* Invoice VAT-style edit (Inventory Invoice only) */
.invoice-vat-edit-layout .invoice-vat-section {
    margin-bottom: 16px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.invoice-vat-edit-layout .invoice-vat-section .panel-heading {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}
.invoice-vat-edit-layout .invoice-vat-field-table {
    margin-bottom: 0;
}
.invoice-vat-goods-services-panel,
.invoice-vat-summary-panel {
    margin-bottom: 16px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.invoice-vat-goods-services-panel .panel-heading,
.invoice-vat-summary-panel .panel-heading {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}
.invoice-vat-summary-panel #lineItemResult {
    margin-bottom: 0;
}
.invoice-vat-subsection-title {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

/* Calendar: compact ProjectTask popover details */
.calendar-projecttask-popover {
    margin-top: 6px;
    max-width: 320px;
}
.calendar-projecttask-popover .calendar-projecttask-row {
    margin: 2px 0;
    line-height: 1.35;
}

/* ===========================
   Tools > History (Orders)
   Premium audit-log UI
   =========================== */
.history-dashboard {
    padding: 10px 0;
}

.history-header,
.history-controls,
.history-table-wrap {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
    overflow: hidden;
}

.history-header-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 14px 18px;
}

.history-eyebrow {
    color: rgba(2, 6, 23, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.history-title {
    margin: 6px 0 6px 0 !important;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.history-subtitle {
    font-size: 14px;
    color: rgba(2, 6, 23, 0.65);
    line-height: 1.35;
}

.history-summary {
    min-width: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.history-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.history-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: rgba(2, 6, 23, 0.78);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.05);
    user-select: none;
}

.history-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}

.history-chip--total { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.10); color: rgba(2, 6, 23, 0.82); }
.history-chip--created { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.18); color: #2563eb; }
.history-chip--approved { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.18); color: #059669; }
.history-chip--rejected { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.20); color: #ea580c; }
.history-chip--edited { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.20); color: #4f46e5; }

.history-controls-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px;
}

.history-control {
    min-width: 220px;
    flex: 1 1 220px;
}

.history-control--date {
    flex: 1 1 320px;
}

.history-control-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: rgba(2, 6, 23, 0.62);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.history-input {
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: none !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.history-input:focus {
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

.history-date-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.history-date-sep {
    color: rgba(2, 6, 23, 0.55);
    font-weight: 700;
}

.history-table-wrap {
    margin-top: 12px;
}

.history-table-inner {
    padding: 14px 10px 6px 10px;
}

.history-audit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
}

.history-audit-table thead th {
    background: linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%);
    color: rgba(2, 6, 23, 0.70);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px 14px;
}

.history-audit-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    vertical-align: top;
}

.history-audit-table tbody tr:nth-child(odd) td {
    background: rgba(248, 250, 252, 0.55);
}

.history-audit-table tbody tr.history-row:hover td {
    background: rgba(59, 130, 246, 0.06) !important;
}

.history-cell--action { width: 120px; }

.history-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.01em;
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.history-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
}

.history-badge--created { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; border-color: rgba(37, 99, 235, 0.22); }
.history-badge--approved { background: rgba(16, 185, 129, 0.12); color: #059669; border-color: rgba(16, 185, 129, 0.22); }
.history-badge--rejected { background: rgba(249, 115, 22, 0.14); color: #ea580c; border-color: rgba(249, 115, 22, 0.25); }
.history-badge--edited { background: rgba(99, 102, 241, 0.14); color: #4f46e5; border-color: rgba(99, 102, 241, 0.25); }
.history-badge--deleted { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.25); }
.history-badge--restored { background: rgba(45, 212, 191, 0.12); color: #14b8a6; border-color: rgba(45, 212, 191, 0.25); }
.history-badge--status-changed { background: rgba(245, 158, 11, 0.14); color: #0B6E4F; border-color: rgba(245, 158, 11, 0.25); }

.history-order-link {
    color: #1d4ed8;
    font-weight: 800;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.history-order-link:hover {
    color: #1e40af;
    text-decoration: underline;
    text-decoration-color: rgba(30, 64, 175, 0.75);
    box-shadow: 0 10px 26px rgba(29, 78, 216, 0.14);
}

.history-changes {
    max-width: 740px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
    color: rgba(2, 6, 23, 0.74);
    padding: 2px 0;
}

.history-empty {
    margin: 10px 0;
    border-radius: 14px;
}

/* ========================================================================== */
/* Settings Index sidebar — FINAL (load order wins over .module-nav / panels) */
/* ========================================================================== */
body .main-container .module-nav.settingsNav,
body .main-container #modnavigator.settingsNav,
html[data-theme="dark"] body .main-container .module-nav.settingsNav,
html[data-theme="dark"] body .main-container #modnavigator.settingsNav {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    background: #243746 !important;
    color: #ffffff !important;
    overflow-y: auto !important;
}

body .main-container .module-nav.settingsNav .hidden-xs.height100Per,
body .main-container .module-nav.settingsNav .settingsgroup {
    min-height: 100% !important;
    background: #2c3b49 !important;
}

body .main-container .module-nav.settingsNav .settingsgroup .panel,
body .main-container .module-nav.settingsNav .settingsgroup .panel-default,
body .main-container .module-nav.settingsNav .settingsgroup-panel,
body .main-container .module-nav.settingsNav .panel-collapse,
body .main-container .module-nav.settingsNav .panel-collapse.ulBlock,
html[data-theme="dark"] body .main-container .module-nav.settingsNav .panel,
html[data-theme="dark"] body .main-container .module-nav.settingsNav .panel-default,
html[data-theme="dark"] body .main-container .module-nav.settingsNav .panel-body {
    background: #2c3b49 !important;
    background-color: #2c3b49 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body .main-container .module-nav.settingsNav .settingsgroup-accordion a,
body .main-container .module-nav.settingsNav .settingsgroup-accordion a span,
body .main-container .module-nav.settingsNav .settingsgroup-accordion a i,
body .main-container .module-nav.settingsNav .list-group a,
body .main-container .module-nav.settingsNav .list-group .menuItemLabel,
body .main-container .module-nav.settingsNav .menuItemLabel,
html[data-theme="dark"] body .main-container .module-nav.settingsNav a,
html[data-theme="dark"] body .main-container .module-nav.settingsNav .menuItemLabel {
    color: #ffffff !important;
}

body .main-container .module-nav.settingsNav .list-group a,
body .main-container .module-nav.settingsNav .list-group .menuItemLabel {
    background: #2f4658 !important;
}

body .main-container .module-nav.settingsNav .settingsgroup-accordion a:hover,
body .main-container .module-nav.settingsNav .list-group a:hover,
body .main-container .module-nav.settingsNav .menuItemLabel:hover {
    background: #3a566b !important;
    color: #ffffff !important;
}

body .main-container .module-nav.settingsNav #settingsMenuSearch,
body .main-container .module-nav.settingsNav input.search-list {
    color: #333333 !important;
    background: #ffffff !important;
}

body .main-container .settingsPageDiv.content-area {
    margin-left: 230px !important;
}