html {
    margin: 0;
    padding: 0;
    font-size: 13px;
    height: auto !important;
    position: relative;
    background: var(--md-background);
}

body {
    margin: 0;
    padding: 0;
    font-size: 13px;
    height: 100% !important;
    position: relative;
    background: var(--md-background);
    /* font-family: 'MyCustomFont', sans-serif;*/
    /*font-family: 'Inter', sans-serif;*/
}

body {
    overflow: hidden;
    background: var(--md-background);
}
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 4px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius: 4px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #888;
        border-radius: 4px;
    }

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #143565;
    border-radius: 4px;
}

.material-box-header h4 {
    font-weight: 500;
    color: var(--md-primary);
    margin: 0;
    font-size: 16px;
}

code {
    background-color: var(--md-neutral-light);
    padding: 2px 5px;
    border-radius: 4px;
}

pre {
    background-color: var(--md-neutral-light);
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
}

.modal-content {
    box-shadow: 2px 3px 9px #898989;
}

.modal-body {
    max-height: 75vh;
    overflow: auto;
    background: #f3f3f3;
}

.clockWindow h2 {
    margin: 1px 0px;
    text-align: center;
    font-size: 13px;
}

.job-skill-board-accordion-body {
    padding: 0px;
}

.btn-go-to-folder {
    padding: 14px;
}

.emp-code-input {
    max-width: 100px;
    padding: 0px 5px !important;
    min-height: 20px;
}

.swal-popup-custom > .swal2-html-container > table > thead > tr > th, .swal2-html-container > table > tbody > tr > td {
    font-size: 13px !important;
}

.accordion-body-inner {
    max-height: 200px;
    overflow: auto;
}
/* Root & Base End */

/* Layout & Containers Start */
/* Main content container */
.main-content {
    margin-left: 0px;
    overflow-y: auto; /* Vertical scroll if needed */
    overflow-x: hidden;
}

.web-main-content {
    margin-top: 0px; /* Same as navbar height */
    height: calc(100vh); /* Full viewport minus navbar */
}

.admin-main-content {
    padding: 10px;
    margin-top: 95px; /* Same as navbar height */
    height: calc(100vh - 90px); /* Full viewport minus navbar */
    /*margin-left: 200px;*/
}

.login-page-container {
    padding: 10px;
}

md-input-container {
    margin: 10px 0px !important;
}

    md-input-container .md-input {
        padding: 5px !important;
        height: 30px !important;
        font-size: 16px;
    }

    md-input-container.md-input-focused label:not(.md-no-float),
    md-input-container.md-input-has-placeholder label:not(.md-no-float),
    md-input-container.md-input-has-value label:not(.md-no-float) {
        transform: translate3d(0, 6px, 0) scale(.80) !important;
    }
/* Custom Toast Classes */
.success-toast .md-toast-content {
    background-color: #4CAF50 !important; /* Green */
    color: white;
}

.error-toast .md-toast-content {
    background-color: #F44336 !important; /* Red */
    color: white;
}

.warning-toast .md-toast-content {
    background-color: #ffc300 !important; /* Red */
    color: black;
}

.login-container {
    display: flex;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: #f9f9f9;
}

.login-illustration {
    flex: 1;
    /*background: linear-gradient(to top right, #e5e7ff, #c0caff);*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}
    /* Optional: Add a white transparent overlay for softer background fade */
    .login-illustration::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom right, rgba(244, 232, 237, 0.85), rgba(180, 207, 255, 0.85) );
        z-index: 1;
        pointer-events: none;
    }

.login-form-section {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--md-background);
    box-shadow: -10px 0 20px rgba(0,0,0,0.05);
}

.center-adjustment {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.material-modal .modal-content {
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.select2-container .select2-selection--single, .select2-container .select2-selection--multiple,
.form-select {
    min-height: 50px !important;
    padding-top: 18px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000000 !important;
}
/* Highlight drop row */
.jstree-wholerow-hovered {
    background: var(--md-selection-bg) !important;
    border-left: 3px solid var(--md-highlight);
}

.welcome-card {
    border-radius: 1rem;
    box-shadow: var(--md-shadow);
}

div:where(.swal2-container) {
    z-index: 9999 !important;
}

.list-object-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da !important;
}

.modal-content {
    border-radius: 15px;
    overflow: hidden;
}

.flatpickr-wrapper-adon {
    width: 10%;
}

.flatpickr-wrapper {
    width: 90%;
}

    .flatpickr-wrapper input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.tab-content {
    border: 1px solid #eee;
    border-top: none;
    padding: 10px;
}

.col-client-email {
    max-width: 250px !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
}


.sort-icon.asc::before {
    content: "\f0de";
}

.sort-icon.desc::before {
    content: "\f0dd";
}

.task-content {
    position: relative;
}

.matrix-scroll-container {
    max-height: 75vh;
    overflow: auto;
    position: relative;
    border: 1px solid #ccc;
}

.skill-row-selected {
    background-color: #ffeaec !important;
}

.workflow-panel {
    position: relative;
}

.workflow-container {
    height: auto;
    max-height: 65vh;
    min-height: 45vh;
    overflow: auto;
}

.file-row {
    padding: 2px 0;
}

.et-table-wrapper {
    width: 74%;
    overflow: auto;
    max-height: 78vh;
    padding: 0;
    border-radius: 3px;
}

.et-table-wrapper {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: auto;
}

.task-type-row {
    transition: all 0.3s ease;
}


.pill-panel {
    width: 100%;
}

.workflow-step-container.lock {
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
    cursor: not-allowed;
}

.additional-file:after {
    content: '* Additional';
    color: #ff0000;
    background: #ffd7d7;
    margin-left: 5px;
    padding: 1px 3px;
    font-size: 10px;
    border-radius: 3px;
    line-height: 0;
    font-weight: 600;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
/* Layout & Containers End */

/* Navigation & Menu Start */
.navbar-light .navbar-brand {
    color: var(--md-white) !important;
    font-weight: bold;
}

.bg-blue-nav {
    --bs-bg-opacity: 1;
    background-image: var(--md-nav-top-background) !important;
    box-shadow: 0px 1px 2px #000000;
    min-height: 60px;
}

.navbar-light .navbar-nav .nav-link, .nav-link:focus {
    color: var(--md-white) !important;
}

.navbar-light .navbar-toggler {
    color: var(--md-white);
    border-color: var(--md-white);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.nav-link {
    display: block;
    padding: 0px;
    color: var(--md-white);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.submenu > .menu-item > .nav-link {
    /*border-right: 5px solid var(--md-submenu);*/
}

.submenu > .active > .nav-link {
    border-right: none;
}

.nav-history {
    position: absolute;
    top: 7px;
    display: inline-block;
    right: 30px;
}

    .nav-history a {
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 8px;
    }

.history-popup .dropdown-item {
    display: block;
    padding: 5px 10px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

    .history-popup .dropdown-item:hover {
        background: #f5f5f5;
    }

    .history-popup .dropdown-item.active {
        background: rgba(0,0,0,0.05) !important;
        color: #ccc;
        font-weight: 500;
    }

.bottom-nav {
    position: absolute;
    top: 60px;
    background-image: var(--md-nav-bottom-background);
    min-height: 40px;
    width: 100%;
    left: 0;
    box-shadow: 0px 1px 2px #000000;
}

.sidebar {
    position: fixed;
    top: 100px;
    left: 0;
    width: 250px;
    height: calc(100% - 56px);
    background-image: var(--md-nav-bottom-background); /* Overlay color */
    overflow-x: hidden;
    overflow-y: hidden;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 1000;
    isolation: isolate; /* Ensure stacking context */
    padding-bottom: 5%;
}

    .sidebar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/menu-back.png?v=1.2.3');
        background-size: cover;
        background-position: center;
        opacity: 0.2; /* adjust for visibility */
        z-index: -1;
    }

    .sidebar:hover {
        overflow-y: auto;
    }

.lft-list-nav {
    align-items: center;
    justify-content: center;
    color: var(--md-white);
    cursor: pointer;
    border: none;
    background-color: rgba(255, 255, 255, 0.13);
    transition: background-color 0.3s ease;
    text-decoration: none;
    position: relative;
    display: block;
}

    .lft-list-nav.active, .lft-list-nav-sub.active {
        z-index: 2;
        color: var(--md-white);
        background-color: var(--md-background) !important;
    }

    .lft-list-nav:hover {
        background-color: var(--md-hover);
    }

    .lft-list-nav.active > .nav-link, .lft-list-nav-sub.active > .nav-link {
        z-index: 2;
        color: var(--md-white);
        background: var(--md-background) !important;
        position: relative;
    }

        .lft-list-nav.active > .nav-link, .lft-list-nav-sub.active > .nav-link::after {
            content: "➤";
            position: absolute;
            right: 5px;
            font-size: 16px;
            top: 7px;
        }

    .lft-list-nav .menu-text {
        display: none;
        margin-left: 10px;
        font-weight: 500;
    }

.sidebar.show .lft-list-nav .menu-text {
    display: inline-block;
}

.lft-list-nav.active {
    background-color: rgba(255, 255, 255, 0.25);
}

.navbar-nav .nav-item.active,
.active > .nav-link {
    position: relative;
    font-weight: 600;
    color: var(--md-info) !important;
}

    .navbar-nav .nav-item.active::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 30px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
    }

.nav-link:hover {
    color: #009fff !important;
}

.hover-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove Bootstrap's offset */
}

.dropdown-menu {
    transition: all 0.3s ease-in-out;
}

.dropdown-notification {
    max-height: 300px;
    overflow: auto;
    max-width: 250px;
}

.top-alert-toggle {
    position: relative;
}

.top-alert-count {
    align-items: center;
    background: #dc2626;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 4px;
    position: absolute;
    right: 0;
    top: 2px;
}

.top-alert-dropdown {
    max-width: 360px;
    min-width: 330px;
    padding: 0;
}

.top-alert-header {
    align-items: center;
    background: #111816;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    position: sticky;
    top: 0;
    z-index: 2;
}

    .top-alert-header .btn-link {
        color: #f6d58a;
        font-size: 12px;
        font-weight: 800;
        padding: 0;
        text-decoration: none;
    }

.top-stock-alert-item {
    align-items: flex-start;
    display: flex;
    gap: 9px;
    white-space: normal !important;
    width: 100% !important;
}

    .top-stock-alert-item.low {
        background: #fff7ed;
        color: #7c2d12;
    }

    .top-stock-alert-item.out {
        background: #fee2e2;
        color: #7f1d1d;
    }

    .top-stock-alert-item:hover {
        background: #fde68a;
    }

.top-stock-alert-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 15px;
    justify-content: center;
    padding-top: 2px;
}

.top-stock-alert-body {
    min-width: 0;
}

    .top-stock-alert-body strong,
    .top-stock-alert-body span {
        display: block;
    }

    .top-stock-alert-body strong {
        color: inherit;
        font-size: 12px;
        line-height: 1.25;
    }

    .top-stock-alert-body span {
        font-size: 11px;
        line-height: 1.35;
        opacity: .86;
    }

.top-alert-empty {
    color: #52605a;
    white-space: normal !important;
    width: 100% !important;
}

.dropdown-menu .dropdown-submenu {
    position: relative;
}

    .dropdown-menu .dropdown-submenu > .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;
        display: none;
    }

    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

.sidebar-toggle-btn {
    position: absolute;
    z-index: 1030;
    padding: 11px 10px;
    cursor: pointer;
    color: #ffffff;
}


.sidebar {
    transition: all 0.3s ease;
}

    .sidebar.hide {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

.main-with-sidebar {
    margin-left: 250px;
}

.menu-toggle-btn {
    position: absolute;
    z-index: 1030;
    height: 25px;
    width: 35px;
    padding: 7px 10px;
    cursor: pointer;
    color: #ffffff;
    left: 23px;
    transform: rotate(90deg);
    top: 8px;
    display: none;
}

    .menu-toggle-btn.show {
        display: block;
    }

.sidebar-toggle-btn-for-mobile, .menu-toggle-btn-for-mobile {
    display: none;
}

.menu-item .nav-link {
    display: flex;
    align-items: center;
    gap: 0px;
    color: #222;
    text-decoration: none;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--md-side-menu-background);
    border-top: 1px solid #dce9f7;
    border-bottom: 1px solid #6b757e;
    transition: all 0.2s ease;
}

.submenu-toggle {
    padding: 8px 10px;
}

.submenu ul {
    border-left: 5px solid var(--md-submenu);
    border-radius: 0px;
}

.lft-list-nav-sub {
    padding: 0px;
    cursor: pointer;
    background: #3d484e;
    list-style: none !important;
}

.menu-item {
    box-shadow: 0px 0px 2px #5c5c5c;
}

.lft-list-nav-sub i {
    width: 16px;
}

.submenu-toggle {
    background: var(--md-nav-bottom-background);
}

.dropdown-menu .sub-module-item {
    padding: 0px;
}

.bottom-nav .module-item .nav-link {
    padding: 10px;
}

.dropdown-menu {
    padding: 0px;
}
/* Navigation & Menu End */
.u-online, .u-offline {
    position: relative;
    display: inline-block;
}

    .u-online::before {
        content: "";
        width: 10px;
        height: 10px;
        background: #00f300;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        right: 0px;
        bottom: 0;
        box-shadow: 0px 1px 1px #000;
        z-index: 99;
    }

    .u-offline::before {
        content: "";
        width: 10px;
        height: 10px;
        background: #aebec9;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        right: 0px;
        bottom: 0;
        box-shadow: 0px 1px 1px #000;
        z-index: 99;
    }

/* Forms & Inputs Start */
.material-icons {
    font-size: 24px;
}

.login-form {
    background: rgba(var(--md-white-rgb), 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--md-white-rgb), 0.4);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);
    max-width: 400px !important;
    margin: 40px auto;
    animation: fadeSlideIn 0.8s ease forwards;
}

md-icon.material-icons {
    color: var(--md-text-secondary);
}
/* Validation error text */
.validation-error {
    color: var(--md-error);
    font-size: 0.8rem;
    margin-top: 5px;
}

.validation-error {
    display: none;
}

.md-input-invalid .validation-error {
    display: block;
    color: #ff4141;
}

.material-icons {
    font-size: inherit;
}

.login-form md-icon {
    font-size: 24px;
}

.login-form {
    background: var(--md-surface);
    z-index: 999;
}
/* Material-style DataTables enhancements */
.material-box {
    background: var(--md-surface);
    border-radius: 8px;
    padding: 10px;
    box-shadow: var(--md-shadow);
    margin: 5px auto;
    margin-bottom: 10px;
    max-width: 100%;
    overflow: hidden;
}

.material-box-header {
    margin-bottom: 5px;
    border-bottom: 1px solid var(--md-border);
    padding-bottom: 5px;
    position: relative;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #aeb2b6;
    border-radius: 3px;
    padding: 6px 10px;
    background-color: #f2f4f6;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c8cbce;
    transition: border-color .15s, background-color .15s;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 250px;
}

    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dataTables_length select:focus {
        outline: none;
        border-color: #6f9fe5;
        background-color: #edf2f9;
        box-shadow: 0 0 0 3px rgba(111,159,229,.25);
    }

.material-box-header md-icon {
    color: var(--md-primary);
}

.form-check {
    padding-left: 0px;
}

    .form-check .form-check-input {
        margin-left: 0px;
    }

.material-modal .modal-header {
    background-image: var(--md-nav-top-background);
    color: var(--md-white);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: move;
}

.material-input {
    position: relative;
    margin-bottom: 1.5rem;
}

    .material-input label {
        font-weight: 500;
        color: var(--md-primary);
        margin-bottom: 4px;
        display: block;
    }

    .material-input input.form-control {
        border: none;
        border-bottom: 2px solid #ccc;
        border-radius: 0;
        box-shadow: none;
        transition: all 0.3s;
    }

        .material-input input.form-control:focus {
            border-bottom: 2px solid var(--md-primary);
            outline: none;
            box-shadow: none;
        }

.form-floating > label {
    color: var(--md-primary);
    font-weight: 500;
}

.form-control:focus {
    border-color: var(--md-primary);
    box-shadow: 0 1px 0 0 var(--md-primary);
}

.floating-label {
    position: absolute;
    top: 3px;
    left: 6px;
    background: var(--md-white);
    padding: 0 4px;
    font-size: 0.81rem;
    z-index: 2;
    color: var(--md-primary);
    font-weight: 500;
}

.form-floating textarea::placeholder, .form-floating input::placeholder {
    color: transparent;
    transition: color 0.2s ease;
}

.form-floating textarea:focus::placeholder, .form-floating input:focus::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 1;
    transform: scale(.81) translateY(-.5rem) translateX(.15rem);
    padding: 8px 10px;
}

.copyable {
    white-space: normal;
    user-select: text;
}

.select-ctrl {
    position: relative;
}

.dz-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #5e5d5d;
    margin-bottom: 10px;
}

.list-object-item .form-label {
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.non-floating-label {
    font-size: 0.81rem;
    color: var(--md-primary);
    font-weight: 500;
    position: relative;
    top: -3px;
}

.non-floating-control {
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 5px;
    padding-top: 0px;
    margin-bottom: 14px;
    min-height: calc(3.5rem + 2px);
    position: relative;
    background: #ffffff;
}

.signle-checkbox {
    padding-top: 14px;
}

.form-switch {
    padding-top: 14px;
}

    .form-switch .form-check-input {
        margin-left: 0;
        margin-right: 5px;
    }

.daterangepicker {
    z-index: 9999 !important;
}

.flatpickr-calendar {
    margin-top: 0 !important;
    top: 100% !important;
    left: 0 !important;
    position: absolute !important;
    z-index: 9999 !important;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}

input.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25) !important;
}

.form-check-group {
    overflow: auto;
}

.select2-selection.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("../images/error.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
    padding-right: 2rem;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url("../images/error.svg") !important;
}

.form-rdo-input {
    top: 2px;
    position: relative;
}

.form-check-label > input {
    position: relative;
    top: 2px;
}
/*Profile*/
.profile-background {
    margin: 10px 0px;
    background-image: url("../images/profile-background.png") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.step-file-limit-input {
    min-height: 20px !important;
    padding: 0px 10px !important;
    font-size: 11px;
    border: 1px solid #eee;
    margin: 5px 0px;
    width: 75px;
    display: inline-block;
    color: #606060;
}

.tree-folder,
.step-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px;
    border-radius: 6px;
}

.btn-step-browse-folder:before {
    content: '← Starting Path';
    position: absolute;
    right: 7px;
}

.tree-folder {
    background: #f5f8ff;
    margin: 2px 0;
}

.folder-toggle {
    cursor: pointer;
    font-size: 13px;
    margin-right: 6px;
}

.folder-name {
    flex-grow: 1;
    font-weight: 600;
}

.folder-count {
    font-size: 12px;
    margin-right: 8px;
    color: #666;
}

.folder-remove,
.step-file-remove {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    color: #888;
    transition: 0.2s;
}

    .folder-remove:hover,
    .step-file-remove:hover {
        background: #ffe6e6;
        color: #c0392b;
    }

.tree-children {
    margin-left: 22px;
}

.step-file {
    margin-bottom: 1px;
    padding: 0px 10px;
}

.step-file-display {
    flex-grow: 1;
}

.step-setting {
    position: absolute;
    right: 35px;
    top: 5px;
    z-index: 99;
}

.step-starting-folder > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    text-align: left;
    font-size: 11px;
}

.file-existed {
    background: #e5ffe5;
    border-left: 3px solid #27ae60;
}

.file-new {
    background: #ffeaea;
    border-left: 3px solid #e74c3c;
}

.step-file-status {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 6px;
    margin-right: 2px;
}

.status-wait i {
    color: #f39c12;
}

.status-locked i {
    color: #c0392b;
}

.status-done i {
    color: #27ae60;
}

.status-workout i {
    color: #0d6efd;
}

.status-reject i {
    color: #dc3545;
}

.task-radio-group > .form-check {
    display: table;
    width: auto;
}
/* Forms & Inputs End */

/* Icon Start */
.fa-icn.file-icon::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
    background-image: url("../images/icons/file-image.png"); /* default */
}

.fa-icn.file-icon[data-ext="png"]::before {
    background-image: url("../images/icons/file-image-png.png");
}

.fa-icn.file-icon[data-ext="jpg"]::before,
.fa-icn.file-icon[data-ext="jpeg"]::before {
    background-image: url("../images/icons/file-image-jpg.png");
}

.fa-icn.file-icon[data-ext="psb"]::before {
    background-image: url("../images/icons/file-image-psb.png");
}

.fa-icn.file-icon[data-ext="psd"]::before {
    background-image: url("../images/icons/file-image-psd.png");
}

.fa-icn.file-icon[data-ext="txt"]::before {
    background-image: url("../images/icons/file-image-txt.png");
}

.fa-icn.file-icon[data-ext="pdf"]::before {
    background-image: url("../images/icons/file-image-pdf.png");
}

.fa-icn.file-icon[data-ext="doc"]::before,
.fa-icn.file-icon[data-ext="docx"]::before {
    background-image: url("../images/icons/file-image-docx.png");
}

/* Icon End */

/* Buttons & Actions Start */
.btn {
    cursor: pointer !important;
}

.btn-success {
    color: #ffffff;
    background: linear-gradient(180deg, #4cae50 0%, #3e9143 100%);
    border-color: #3c883f;
    box-shadow: inset 0 1px 0 #7cd27f, inset 0 -1px 0 #2e6b30;
}

    .btn-success:hover {
        background: linear-gradient(180deg, #5cb85c 0%, #3d923f 100%);
        border-color: #327a35;
    }

    .btn-success:active {
        background: linear-gradient(180deg, #3d923f 0%, #2b6e2d 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-primary {
    color: #ffffff;
    background: linear-gradient(180deg, #007bff 0%, #0062cc 100%);
    border-color: #005cbf;
    box-shadow: inset 0 1px 0 #66b0ff, inset 0 -1px 0 #004fa3;
}

    .btn-primary:hover {
        background: linear-gradient(180deg, #198cff 0%, #005ecb 100%);
        border-color: #004fa3;
    }

    .btn-primary:active {
        background: linear-gradient(180deg, #005ecb 0%, #004192 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-secondary {
    color: #ffffff;
    background: linear-gradient(180deg, #6c757d 0%, #545b62 100%);
    border-color: #4e555b;
    box-shadow: inset 0 1px 0 #9da3a8, inset 0 -1px 0 #3f4549;
}

    .btn-secondary:hover {
        background: linear-gradient(180deg, #858e96 0%, #4e555b 100%);
        border-color: #3f4549;
    }

    .btn-secondary:active {
        background: linear-gradient(180deg, #4e555b 0%, #343a40 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-danger {
    color: #ffffff;
    background: linear-gradient(180deg, #dc3545 0%, #b52a38 100%);
    border-color: #a22634;
    box-shadow: inset 0 1px 0 #ef6b77, inset 0 -1px 0 #8b1f2d;
}

    .btn-danger:hover {
        background: linear-gradient(180deg, #e24a58 0%, #a62634 100%);
        border-color: #8b1f2d;
    }

    .btn-danger:active {
        background: linear-gradient(180deg, #a62634 0%, #7a1b27 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-warning {
    color: #212529;
    background: linear-gradient(180deg, #ffc107 0%, #d9a300 100%);
    border-color: #c69500;
    box-shadow: inset 0 1px 0 #ffdb5e, inset 0 -1px 0 #9c7c00;
}

    .btn-warning:hover {
        background: linear-gradient(180deg, #ffd633 0%, #cc9500 100%);
        border-color: #9c7c00;
    }

    .btn-warning:active {
        background: linear-gradient(180deg, #cc9500 0%, #997600 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-info {
    color: #ffffff;
    background: linear-gradient(180deg, #17a2b8 0%, #108192 100%);
    border-color: #0f6e7e;
    box-shadow: inset 0 1px 0 #5cd4e4, inset 0 -1px 0 #0b5967;
}

    .btn-info:hover {
        background: linear-gradient(180deg, #27b8ce 0%, #0f6e7e 100%);
        border-color: #0b5967;
    }

    .btn-info:active {
        background: linear-gradient(180deg, #0f6e7e 0%, #0a4d5a 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-light {
    color: #212529;
    background: linear-gradient(180deg, #f8f9fa 0%, #e0e3e6 100%);
    border-color: #cfd2d5;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #b8bbbf;
}

    .btn-light:hover {
        background: linear-gradient(180deg, #ffffff 0%, #d9dce0 100%);
        border-color: #b8bbbf;
    }

    .btn-light:active {
        background: linear-gradient(180deg, #d9dce0 0%, #bfc3c8 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn-dark {
    color: #ffffff;
    background: linear-gradient(180deg, #343a40 0%, #1d2124 100%);
    border-color: #181b1e;
    box-shadow: inset 0 1px 0 #5a6268, inset 0 -1px 0 #0f1012;
}

    .btn-dark:hover {
        background: linear-gradient(180deg, #444b52 0%, #181b1e 100%);
        border-color: #0f1012;
    }

    .btn-dark:active {
        background: linear-gradient(180deg, #181b1e 0%, #0c0e10 100%);
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
    }

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(60, 120, 200, 0.3);
}

.btn-edit, .btn-delete, .btn-permission, .btn-preview, .btn-img-edit, .btn-custom, .btn-print-token, .btn-cancel, .btn-view, .btn-print-invoice {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 5px;
    margin: 2px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #b0b3b6;
    background-color: #e4e6e8;
    color: #222;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #c0c2c4;
    transition: all 0.15s ease-in-out;
}

    .btn-edit:hover, .btn-delete:hover, .btn-permission:hover, .btn-preview:hover, .btn-img-edit:hover, .btn-custom:hover, .btn-print-token:hover, .btn-cancel:hover, .btn-view:hover, .btn-print-invoice:hover {
        background-color: #d8dadc;
        border-color: #9c9fa1;
    }

    .btn-edit:active, .btn-delete:active, .btn-permission:active, .btn-preview:active, .btn-img-edit:active, .btn-custom:active, .btn-print-token:active, .btn-cancel:active, .btn-view:active, .btn-print-invoice:active {
        background-color: #c4c7ca;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.25);
    }

.btn-edit, .btn-custom {
    color: #0b3b8b;
}

.btn-delete {
    color: #8b0b0b;
}

.btn-permission, .btn-print-token {
    color: #806000;
}

.btn-preview {
    color: #066d06;
}

.btn-img-edit {
    color: #4a1d8a;
}

.btn-close {
    background: none !important;
    color: var(--md-white) !important;
    opacity: 1;
    font-weight: bold;
}

.btn-edit i {
    color: #ef9300;
}

.btn-delete i {
    color: #f2685e;
}

.btn-delete:hover i {
    color: darkred;
}

.btn-edit:hover i {
    color: darkgoldenrod;
}

.btn-link {
    overflow-wrap: anywhere;
}

.list-object-item .btn-danger {
    z-index: 2;
    font-size: 1.2rem;
    padding: 0.2rem 0.5rem;
    line-height: 1;
    border-radius: 50%;
}

.remove-btn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    padding: 0px 6px;
    font-size: 14px;
    line-height: 1;
    z-index: 2;
}

.button-ctrl {
    position: relative;
    display: inline-block;
    padding: 0 2px;
}

.btn-block {
    display: block;
    width: 100%;
}

.pill-toggle {
    display: inline-flex;
    border: 2px solid var(--md-primary);
    border-radius: 50px;
    overflow: hidden;
    background-color: transparent;
    font-weight: 600;
    cursor: pointer;
}

    .pill-toggle .btn {
        border-radius: 0;
        padding: 2px 15px;
        transition: background-color 0.3s, color 0.3s;
        color: #0023a9;
        background-color: transparent;
    }

        .pill-toggle .btn.active {
            background-color: var(--md-primary);
            color: #ffffff;
        }

.btn-run-wb {
}

.btn-remove-step {
    position: absolute;
    top: 7px;
    right: 7px;
    color: red;
    background: #ffdbdb;
    width: 20px;
    height: 20px;
    line-height: 0;
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
    text-align: center;
}

.btn-workflow-add {
    position: absolute;
    right: 10px;
    top: 10px;
}

.btn-get-workflow-folders {
    position: absolute;
    right: 172px;
    top: 5px;
}

.btn-get-workflow-files {
    position: absolute;
    right: 90px;
    top: 5px;
}

.btn-remove-flow {
    position: absolute;
    right: 10px;
    top: 5px;
}

.btn-add-workflow-step {
    margin-right: 5px;
}

.btn-show-hide-file-details {
    background: #fff;
    padding-left: 10px;
}

    .btn-show-hide-file-details summary {
        color: #006de4;
    }

.pill-control {
    display: flex;
}

.pill-button {
    width: auto;
    background: #d0e9ff;
}

.btn-pill {
    text-align: left !important;
    padding: 5px;
    padding-right: 20px;
    border: none !important;
    margin-bottom: 1px;
    position: relative;
    background: #91bbe7;
    text-wrap: nowrap;
}

    .btn-pill::before {
        content: "›";
        position: absolute;
        right: 8px;
        top: 48%;
        color: #fff !important;
        transform: translateY(-50%);
        font-size: 25px;
        pointer-events: none;
    }

    .btn-pill.active {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }


/* Buttons & Actions End */

/* Tables & DataTables Start */
/* ===== Classic DataTable Theme (place after DataTables CSS) ===== */

/* Header / Footer */
table.dataTable {
    /* border: 1px solid #b6b9bd;*/
    border-radius: 0px;
    overflow: hidden;
    background-color: #fff;
}

    table.dataTable thead th {
        background: linear-gradient(180deg, #e8eaec 0%, #ccd0d4 100%);
        color: #1f1f1f;
        font-weight: 600;
        box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #c7cace;
        padding: 10px 12px;
        position: relative; /* for arrows */
        padding-right: 24px !important; /* room for arrows */
    }

    table.dataTable tfoot th {
        background: linear-gradient(180deg, #e8eaec 0%, #ccd0d4 100%);
        color: #2a2a2a;
        font-weight: 500;
        border-top: 1px solid #b6b9bd !important;
        box-shadow: inset 0 1px 0 #ffffff;
        padding: 8px 12px;
    }
    /* subtle zebra */
    table.dataTable tbody tr {
        transition: background-color .2s ease-in-out;
    }

        table.dataTable tbody tr:hover {
            background-color: #e6efff;
        }
    /* ===== Sorting arrows (disable defaults, add classic) ===== */
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting_desc:after {
        content: none !important;
        background-image: none !important;
    }
    /* Unicode arrows (simple & reliable) */
    table.dataTable thead th.sorting::after,
    table.dataTable thead th.sorting_asc::after,
    table.dataTable thead th.sorting_desc::after {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        pointer-events: none;
    }

    table.dataTable thead th.sorting::after {
        content: "⇅";
        color: #7a7f84;
        opacity: .7;
    }

    table.dataTable thead th.sorting_asc::after {
        content: "▲";
        color: #2d5fa8;
        opacity: .95;
    }

    table.dataTable thead th.sorting_desc::after {
        content: "▼";
        color: #2d5fa8;
        opacity: .95;
    }
/* ===== Optional compact density ===== */
.dataTables_wrapper.classic-compact table.dataTable tbody td,
.dataTables_wrapper.classic-compact table.dataTable thead th,
.dataTables_wrapper.classic-compact table.dataTable tfoot th {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

table.dataTable thead th.sorting_asc::after {
    content: "▲" !important;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #2d5fa8;
    opacity: .95 !important;
    pointer-events: none;
}

table.dataTable thead th.sorting_desc::after {
    content: "▼" !important;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #2d5fa8;
    opacity: .95 !important;
    pointer-events: none;
}

.dataTables_scrollBody table th,
.dataTables_scrollBody table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    border-bottom-width: 0 !important;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
    font-size: 12px;
}

.dataTables_scrollHead thead th, .dataTables_scrollFoot tfoot th {
    padding: 5px !important;
    border-bottom: none !important;
}

table.dataTable tbody tr:not(.selected):hover td,
table.dataTable tbody tr:not(.selected):hover th {
    background-color: #e6f7ff !important; /* Light blue */
    box-shadow: none !important;
    color: #000 !important;
}

table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected th {
    background-color: #ffe0b2 !important; /* Light orange */
    box-shadow: none !important;
    color: #000 !important;
}

table.dataTable.hover tbody tr.selected:hover td,
table.dataTable.display tbody tr.selected:hover td,
table.dataTable.hover tbody tr.selected:hover th,
table.dataTable.display tbody tr.selected:hover th {
    background-color: #ffe0b2 !important; /* Same as selected */
    box-shadow: none !important;
    color: #000 !important;
}

.thead-task th {
    border-left: 2px solid #b2d7c8 !important;
}

.dataTables_scrollFootInner, .dataTables_scrollHeadInner {
    width: 100% !important;
}

.matrix-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

    .matrix-table thead tr:nth-child(1) th {
        top: -1px;
        background: #ccc;
    }

    .matrix-table thead tr:nth-child(2) th {
        top: 30px;
        background: #ccc;
    }

    .matrix-table thead tr:nth-child(3) th {
        top: 61px;
        background: #ccc;
    }

    .matrix-table thead th {
        position: sticky;
        z-index: 10;
        background: #ccc;
        text-align: center;
        vertical-align: middle;
        font-size: 12px;
        width: auto;
        white-space: nowrap;
        height: 32px;
        padding: 4px;
    }

    .matrix-table th:first-child,
    .matrix-table td:first-child {
        position: sticky;
        left: 0px;
        z-index: 9;
        background-color: #fff;
        width: auto;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
    }

    .matrix-table thead tr:nth-child(1) th:first-child {
        z-index: 12;
        background: #ccc;
        border-left: 0px !important;
        border-right: 2px solid #b2d7c8;
        top: -2px !important;
    }

    .matrix-table thead tr:nth-child(2) th:first-child {
        z-index: 11;
    }

    .matrix-table thead tr:nth-child(3) th:first-child {
        z-index: 11;
    }

    .matrix-table td {
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
        width: auto;
        padding: 4px;
        white-space: nowrap;
        min-width: 40px;
    }

    .matrix-table thead tr.thead-task th {
        background-color: #f1f5fb;
        font-weight: bold;
    }

    .matrix-table thead tr.thead-tasktype th {
        background-color: #b2d7c8;
        font-weight: 500;
    }

    .matrix-table thead tr.thead-skill th {
        background-color: #f1dda4;
        font-weight: 400;
    }

.et-fixed-header-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .et-fixed-header-table thead th {
        position: sticky;
        top: 0;
        background-image: var(--md-nav-bottom-background);
        color: white;
        z-index: 2;
    }

.et-diff-wrap {
    min-width: 270px;
}

    .et-diff-wrap .et-diff {
        white-space: nowrap;
    }

.et-th-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.et-toggle-all-btn {
    border: 0;
    background: white;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 2px;
}

    .et-toggle-all-btn i {
        font-size: 16px;
    }

tbody, td, tfoot, th, thead, tr {
    vertical-align: middle;
}

div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button {
    font-size: 13px !important;
    line-height: 1.1em !important;
}

    div.dt-buttons > .dt-button:first-child, div.dt-buttons > div.dt-button-split .dt-button:first-child {
        margin-left: 0 !important;
    }

.table-sm > thead > tr > th, .table-sm > tbody > tr > td, .table-sm > tfoot > tr > th {
    font-size: 12px !important;
}
/* Tables & DataTables End */

/* Modals & Dialogs Start */
.modal-header {
    cursor: move;
    user-select: none;
    padding: 10px 15px;
}

.modal {
    z-index: 9999;
}

.modal-dialog {
    margin: 2rem auto;
}

.modal-xxl {
    max-width: 1300px !important;
}

.modal-xxxl {
    max-width: 80% !important;
}

.swal-popup-custom > .swal2-title {
    font-size: 14px !important;
}

.swal2-html-container,
.swal2-html-container * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    pointer-events: auto;
}
/* Modals & Dialogs End */



/* Components & Widgets Start */
.custom-toast {
    position: fixed;
    background: var(--md-success);
    color: var(--md-white);
    padding: 10px 16px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
}

    .custom-toast.error {
        background: var(--md-error);
    }

    .custom-toast.warning {
        background: var(--md-warning);
        color: black !important;
    }

    .custom-toast.visible {
        opacity: 1;
    }

.dropzone {
    border: 2px dashed var(--md-border);
    border-radius: 12px;
    background: var(--md-neutral-light);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 110px;
    max-height: 300px;
    overflow: auto;
}

    .dropzone:hover,
    .dropzone.border-primary {
        border-color: var(--md-primary);
        background-color: var(--md-hover-blue);
    }

.popover {
    z-index: 9999 !important;
}

.tab-item {
    margin: 0 1px;
    background: #eee;
    border-radius: 2px;
}

.tab-bar {
    padding: 5px 10px;
    color: var(--md-primary) !important;
    border: 1px solid #eee !important;
    border-bottom: none !important;
}

    .tab-bar:hover, .tab-bar:active, .tab-bar:visited, .tab-bar:focus {
        color: var(--md-primary) !important;
    }

    .tab-bar.active {
        font-weight: bold;
    }

#fileFlowChart {
    height: 350px;
}

.clockWindow {
    box-shadow: 1px 2px 3px #000000;
    position: fixed;
    top: 20px;
    left: 20px;
    width: auto;
    min-width: 100px;
    background: #000;
    color: rgb(0 255 161);
    border-radius: 5px;
    z-index: 9998;
    user-select: none;
    cursor: move;
    padding: 2px;
}

    .clockWindow.selected-clock {
        border: 2px solid #007bff;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }

.accordion-button::after {
    background-size: 1rem;
}

.ready-file-accordion-button {
    padding: 5px 10px !important;
}

    .ready-file-accordion-button::after {
        background-size: 1rem;
        position: absolute !important;
        right: 5px;
        top: 10px;
    }

/* Components & Widgets End */

/* Images & Media Start */
.login-illustration img {
    max-width: 80%;
}

.img-thumbnail {
    height: 120px;
    width: 120px;
}

.dz-preview .img-preview {
    max-height: 100px;
    width: auto;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--md-outline);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
}

.dz-preview > div > .text-truncate {
    display: inline-block;
    white-space: break-spaces !important;
}
/* Images & Media End */
/* Utilities & Helpers Start */
.history-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.login-illustration {
    position: relative;
    overflow: hidden;
    padding: 40px;
    text-align: center;
    background-size: 100% 100% !important;
}
/* Logo stays sharp and on top */
.login-logo {
    position: relative;
    z-index: 2;
    max-width: 160px;
    height: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(180deg, #e3e6e8 0%, #cbd0d3 100%);
    border-color: #8e9195 !important;
}

.dt-button:hover {
    background: linear-gradient(180deg, #e3e6ea 0%, #cbd0d4 100%) !important;
    border-color: #8f9397 !important;
}

.dt-button:active {
    background: linear-gradient(180deg, #c7cacf 0%, #b3b7bc 100%) !important;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.25) !important;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.stat-box {
    border-radius: 1rem;
    background-color: var(--md-white);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 30px 20px;
}

.info-icon {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    z-index: 2;
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
}

.list-object-item {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    padding: 1rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .list-object-item:hover {
        border-color: #adb5bd;
        background-color: #f1f3f5;
    }

fieldset {
    border: 1px solid #ccc;
    padding: 0 10px;
    padding-top: 35px;
    margin-bottom: 1rem;
    border-radius: 5px;
    background: #ffffff;
    position: relative;
}

legend {
    font-weight: bold;
    font-size: 12px;
    color: #8b8b8b;
    width: 100%;
    background: #eee;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px 5px 0px 0px;
    padding: 0px 10px;
    padding-bottom: 2px;
}

.clock {
    font-size: 16px;
    text-align: center;
    line-height: 18px;
    font-weight: 500;
}

.date {
    font-size: 11px;
    text-align: center;
}

.sortable-chosen {
    background: #ffeeba;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.emp-box {
    position: relative;
    display: inline-block;
}

.emp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.emp-box.online::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #00f300;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    right: 0px;
    bottom: 0;
    box-shadow: 0px 1px 1px #000;
    z-index: 99;
}

.emp-box.offline::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #aebec9;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    right: 0px;
    bottom: 0;
    box-shadow: 0px 1px 1px #000;
    z-index: 99;
}

.type-separator {
    border-left: 2px solid #f1dda4 !important;
}

.skill-emp-pnl {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.add-as-skilled-emp {
    display: none;
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 14px;
    background: rgb(6 129 117 / 90%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    z-index: 10;
    line-height: 0;
    padding: 8px;
}

.flow-file {
    margin-bottom: 3px;
    background: #fdfdfd;
    padding: 2px;
    font-size: 13px;
    border-radius: 5px;
    color: #dc3545;
}

.text-green {
    color: seagreen;
}

.text-red {
    color: red;
}

h4:has(.global-work-board-title.blink) {
    animation: blink 1.8s ease-in-out infinite;
    position: relative;
    top: -6px;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.file-filter-bar {
    background: #ddd;
    margin-bottom: 10px;
    padding: 8px 5px;
    border-radius: 5px;
    font-weight: bold;
}

.file-type-header {
    font-size: 11px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    color: #818181;
    margin-top: 10px;
}

.file-filter-bar-count {
    background: #ddd;
    margin-top: 20px;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
}

.location-open-link, .flow-open-link {
    text-decoration: none !important;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.min-timmer {
    background: #232323;
    padding: 5px;
    color: #fff;
    text-align: center;
    margin-bottom: 5px;
    border-radius: 10px;
}

.open-link {
    cursor: pointer;
    text-decoration: underline;
}

.wf-guideline-menu {
    width: max-content;
    max-width: 537px;
    white-space: nowrap;
    max-height: 320px;
    overflow: auto;
}

    .wf-guideline-menu > .form-check > label {
        font-size: 11px;
    }

.wf-guideline-btn-modern {
    background: linear-gradient(135deg, #ffffff 0%, #f6f8ff 100%);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 5px;
    padding: 3px 5px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .wf-guideline-btn-modern:hover {
        border-color: rgba(13,110,253,.35);
        box-shadow: 0 10px 26px rgba(13,110,253,.10);
    }

.wf-guideline-btn .wf-guide-title {
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.wf-guideline-menu-modern {
    width: 520px;
    max-width: 92vw;
    border: 1px solid rgba(0,0,0,.08);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

.wf-guide-divider {
    height: 1px;
    background: rgba(0,0,0,.08);
}

.wf-guide-all-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 2px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 3px;
    background: #fbfcff;
}

.wf-guide-list {
    max-height: 320px;
    overflow: auto;
    background: #fff;
}

.wf-guide-item-row {
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
}

    .wf-guide-item-row:hover {
        background: #f8faff;
        border-color: rgba(13,110,253,.12);
    }

.wf-guide-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(13,110,253,.10);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 2px;
}

.wf-guide-filename {
    display: block;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}

.wf-guide-foot {
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
}

.wf-guide-close {
    border-radius: 10px;
}

/* Utilities & Helpers End */
/* Notifications & Toasts Start */
.notification {
    font-size: 12px;
    color: #641313;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    background: #eee;
    margin: 3px;
    width: 210px;
    transition: ease-in-out 0.3s;
}

    .notification:hover {
        cursor: pointer;
        background: #ffd6da;
    }
/* Notifications & Toasts End */
/* Miscellaneous Start */
.for-desk-app {
    padding-right: 30px !important;
}

.no-gutters {
    margin-right: 0px !important;
    margin-left: -0px !important;
}

.special-gutters {
    margin-right: -5px !important;
    margin-left: -5px !important;
}

.special-col {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.no-col {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.red {
    color: red !important;
}

.green {
    color: green !important;
}

.bg-white {
    background: #ffffff !important;
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Make Inputs and Button Full Width */
.full-width {
    width: 100%;
}

md-button.md-icon-button {
    min-width: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
}
/* Position eye toggle */
.eye-toggle {
    position: absolute !important;
    top: 0px;
    right: 0;
    min-width: 0 !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
}

.login-button {
    width: 100%;
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 0;
    font-size: 16px;
}

.welcome-user {
    color: var(--md-white) !important;
}

/* Professional login */
.professional-login {
    min-height: 100vh;
    background: radial-gradient(circle at 12% 16%, rgba(197, 160, 89, .18), transparent 32%), linear-gradient(135deg, #07111f 0%, #132238 42%, #f5f0e8 42%, #ffffff 100%);
    color: #172033;
}

    .professional-login .login-illustration {
        min-height: 100vh;
        background-size: cover !important;
        background-position: center !important;
    }

        .professional-login .login-illustration::before {
            background: linear-gradient(145deg, rgba(7, 17, 31, .94), rgba(17, 34, 56, .82)), linear-gradient(45deg, rgba(197, 160, 89, .22), transparent);
        }

.professional-login-visual {
    align-items: stretch;
    justify-content: flex-start;
}

.login-brand-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    min-height: calc(100vh - 80px);
    padding: 8px;
    color: #fff;
    text-align: left;
}

    .login-brand-panel .login-logo {
        width: 116px;
        max-width: 116px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
    }

.login-brand-copy {
    max-width: 540px;
}

    .login-brand-copy span,
    .login-card-kicker {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        border: 1px solid rgba(197, 160, 89, .42);
        border-radius: 999px;
        padding: 7px 12px;
        background: rgba(197, 160, 89, .14);
        color: #e2bd71;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .login-brand-copy h1 {
        margin: 18px 0 14px;
        max-width: 520px;
        color: #fff;
        font-size: 42px;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: 0;
    }

    .login-brand-copy p {
        max-width: 500px;
        color: rgba(255, 255, 255, .78);
        font-size: 16px;
        line-height: 1.7;
        margin: 0;
    }

.professional-login .login-form-section {
    justify-content: center;
    align-items: center;
    padding: 52px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94));
    box-shadow: -26px 0 70px rgba(7, 17, 31, .12);
}

.professional-login .login-page-container {
    width: 100%;
    max-width: 450px;
    padding: 0;
}

.professional-login-card {
    width: 100%;
    max-width: 450px !important;
    margin: 0 auto !important;
    padding: 38px !important;
    border: 1px solid rgba(23, 32, 51, .08) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 28px 74px rgba(15, 23, 42, .14) !important;
}

.login-card-header {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

    .login-card-header h2 {
        margin: 14px 0 8px;
        color: #101828;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 0;
    }

    .login-card-header p {
        margin: 0;
        color: #667085;
        font-size: 14px;
        line-height: 1.55;
    }

.professional-login-input {
    width: 100%;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
}

.professional-login .login-button {
    min-height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #18263c 0%, #273b59 58%, #c5a059 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(24, 38, 60, .28);
    letter-spacing: 0;
    text-transform: none;
}

    .professional-login .login-button i {
        margin-right: 8px;
    }

.login-security-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

    .login-security-row i {
        color: #c5a059;
        margin-right: 5px;
    }
/* classic light-blue */

/* Controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-family: "Segoe UI", Tahoma, sans-serif;
    margin: .5em 0;
    color: #222;
}
    /* Pagination */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: linear-gradient(180deg, #f0f2f4 0%, #d8dbde 100%);
        border: 1px solid #a1a4a8 !important;
        color: #1f1f1f;
        border-radius: 3px;
        padding: .2em 1em !important;
        margin: 2px;
        box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c0c3c6;
        transition: all .15s ease-in-out;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(180deg, #4a8ff7 0%, #346fcb 100%) !important;
            color: #fff !important;
            border-color: #2f65b6 !important;
            box-shadow: inset 0 1px 0 #7db2ff, inset 0 -1px 0 #285aa2;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            opacity: .5;
            background: #f1f3f5;
            color: #888 !important;
            cursor: default;
        }
/* DT Buttons (Copy/CSV/Excel/PDF/Print) */
.dt-button {
    background: linear-gradient(180deg, #eef1f4 0%, #d7dadf 100%) !important;
    color: #1f1f1f !important;
    padding: 6px 12px !important;
    border-radius: 3px !important;
    border: 1px solid #a3a7ab !important;
    font-weight: 600;
    margin-right: 6px !important;
    position: relative;
    top: 6px;
    transition: all .15s ease-in-out;
}

.md-required {
    font-size: 16px;
}

.top-left {
    top: 20px;
    left: 20px;
}

.top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.top-right {
    top: 20px;
    right: 20px;
}

.bottom-left {
    bottom: 20px;
    left: 20px;
}

.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-right {
    bottom: 20px;
    right: 20px;
}

.main-full {
    margin-left: 0px;
}

#nav_content {
    padding-left: 70px;
    padding-right: 70px;
}

.float-right {
    float: right;
}

.sub-module-item {
}
/* Optional: better spacing for items */
#treeContainer .jstree-anchor {
    padding: 4px 8px;
    line-height: 20px;
}

#treeContainer .jstree-container-ul {
    max-height: 50vh;
    overflow: auto;
}

.stat-box i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--md-info);
}

.dz-left {
    flex: 1;
    min-width: auto;
}

.dz-preview {
}

.sw-doc-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.field-type {
    margin-bottom: 20px;
}

.info-icon {
    cursor: pointer;
    color: #0d6efd;
    font-size: 1rem;
}

li[id^="module_"] > .jstree-anchor {
    cursor: default !important;
}

.dataTables_scrollBody tbody th, .dataTables_scrollBody tbody td {
    padding: 1px 5px !important;
}

    .dataTables_scrollBody tbody td.limit-cell-td {
        padding: 1px !important;
    }

.date-field, .date-addon {
    padding: 0px 5px;
}

.sortable-ghost {
    opacity: 0.4;
    background: #d1ecf1;
    border: 2px dashed #17a2b8;
}

.sort-icon {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.status-pending {
    border: 1px solid #ffc107;
}

.status-running {
    border: 1px solid #17a2b8;
}

.status-ready {
    border: 1px solid #28a745;
}

.status-uploading {
    border: 1px solid #dc3545;
}

.urgency-low {
    background-color: #e6ffe6 !important;
}

.urgency-medium {
    background-color: #fffacc !important;
}

.urgency-high {
    background-color: #ffebeb !important;
}

.urgency-overdue {
    background-color: #f7d6d6 !important;
}

.drag-handle-bar i {
    margin-right: 4px;
}

.status-pending .drag-handle-bar {
    background-color: rgba(255, 193, 7, 0.30);
    color: #000;
}

.status-running .drag-handle-bar {
    background-color: rgba(23, 162, 184, 0.30);
    color: #fff;
}

.status-ready .drag-handle-bar {
    background-color: rgba(40, 167, 69, 0.30);
    color: #fff;
}

.status-uploading .drag-handle-bar {
    background-color: rgba(220, 53, 69, 0.30);
    color: #fff;
}

.file-progress-bar {
    height: 14px !important;
    background: #3e5985;
    font-size: 9px;
    color: #fff;
    padding: 0px 2px;
}

.progress-bar {
    position: absolute;
    height: 10px !important;
    background: #3e5985;
    font-size: 9px;
}

.toggle-details {
    cursor: pointer;
}

.skill-cell {
    cursor: pointer;
    transition: background 0.2s, border 0.2s;
}

    .skill-cell:hover {
        background-color: #fefcbf;
        cursor: pointer;
    }

.flow-file-remove {
    color: red !important;
}

.sortable-placeholder {
    background: #f3f3f3;
    border: 2px dashed #ccc;
    height: 80px;
    margin-bottom: 10px;
}

.drag-handle {
    cursor: move;
}

.step-file-search {
    display: inline-block;
    width: 200px;
    margin-right: 10px;
}

.step-setting-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    background: #dc3545;
    color: #fff;
    position: absolute;
    top: -5px;
    right: -5px;
}

.emp-add-job-skill {
    padding: 0px 5px;
    font-size: 11px;
}

.emp-box .remove-emp {
    display: none;
    position: absolute;
    top: 6px;
    right: -10px;
    transform: translate(-50%, -50%);
    font-size: 14px;
    background: rgba(220, 53, 69, 0.9);
    padding: 0px 2px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    z-index: 10;
    line-height: 14px;
}

.emp-box:hover .remove-emp {
    display: inline-block;
}

.emp-box:has(.add-as-skilled-emp) {
    opacity: 0.3;
}

.emp-box:hover .add-as-skilled-emp, .emp-box:hover {
    display: inline-block;
    opacity: 1 !important;
}

.et-expected, .et-current {
    font-size: 13px;
}

.go-folder-link {
    margin-top: -25px !important;
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.flow-files {
    max-height: 50vh;
    overflow: auto;
}

.flow-file-path-existed {
    color: #12a900;
}

.flow-warning {
    display: block;
    font-weight: bold;
    padding-left: 7px;
    position: relative;
    top: -5px;
}

.highlight {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

.help-file {
    transition: ease-in-out 0.3s;
    font-weight: 400;
    font-style: italic;
}

    .help-file:hover {
        cursor: pointer;
        color: #0d6efd;
        background: #c9dfff;
    }

.help-dir-name {
    cursor: pointer;
}
/* Header = gradient by status */
.status-running .drag-handle-bar {
    background: linear-gradient(90deg, #17a2b8, #138496);
    color: #fff;
}

.status-ready .drag-handle-bar {
    background: linear-gradient(90deg, #37d75b, #00ad27);
    color: #fff;
}

.status-uploading .drag-handle-bar {
    background: linear-gradient(90deg, #dc3545, #a71d2a);
    color: #fff;
}

.status-pending .drag-handle-bar {
    background: linear-gradient(90deg, #ffc107, #e0a800);
    color: #000;
}

.clickable {
    cursor: pointer !important;
}

.badge {
    font-size: 12px !important;
    font-weight: 500;
    margin: 1px;
    padding: 3px 5px;
}

.step-file-access-mode {
    min-height: 20px !important;
    padding: 0px 10px !important;
    font-size: 11px;
    border: 1px solid #eee;
    margin: 5px 0px;
    width: 130px;
    display: inline-block;
    color: #606060;
}

/* Miscellaneous End */

/* Smooth show for DataTables inside modals */
.modal.dt-smooth .dataTables_wrapper {
    opacity: 1;
    transition: opacity .12s ease;
}

.modal.dt-smooth.dt-ready .dataTables_wrapper {
    opacity: 1;
}

/* Fix scrollX conflict with table-responsive inside modals */
.modal.dt-smooth .table-responsive {
    overflow: visible !important;
}

/* Ensure table uses full width */
.modal.dt-smooth table.dataTable {
    width: 100% !important;
}

/* Leave Yearly Limit CSS*/
.limit-cell {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    width: 100%;
    padding: 6px;
    border-radius: 5px;
    background: #fffdf2;
    border: 1px solid #ede1bb;
}

    .limit-cell.cell-selected {
        outline: 1px dotted #6471ff;
        background: rgb(255 255 255);
        font-weight: 600;
    }

.dt-year-wrap {
    padding: 0 !important;
}

    .dt-year-wrap > span > .ddl-year {
        border: none;
        padding: 0px;
        margin: 0;
        font-size: 13px;
        width: 100px;
        height: 24px;
    }

.page {
    position: relative;
    border-radius: 10px;
    box-shadow: 1px 1px 2px #bfbfbf;
    padding: 10px;
}

    .page > div > .center-adjustment {
        width: 100% !important;
        display:block !important;
    }

.user-manual {
    color: #5275a1;
    border-radius: 3px;
    padding: 2px 10px;
    margin: 5px 0px;
    display: inline-block;
    position: relative;
    width: auto;
    text-decoration: underline;
}

    .user-manual:hover {
        cursor: pointer;
        color: #0a44aa;
    }

.lg-chk {
    width: 16px;
    height: 16px;
}

.custom-select {
    padding: 5px;
    border-radius: 3px !important;
    border: 1px solid #d3d3d3;
    color: #787878;
    width: 100%;
}

.swal-radio-left .swal2-radio {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
    margin: 0px 10px !important;
}

    .swal-radio-left .swal2-radio label {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

.swal-radio-left .swal2-html-container {
    text-align: left !important;
}

.psps-minh-list {
    border-radius: 12px;
    min-height: 60vh;
    background: #303030;
    padding: 10px 0px;
}

.psps-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 5px;
    max-height: 60vh;
    overflow: auto;
}

.psps-tile {
    position: relative;
    padding: 5px;
    border-radius: 5px;
    user-select: none;
    background: linear-gradient(337deg, #585858 0%, #4c4c4c 45%, #404142 100%);
    border: 1px solid rgb(219 219 219 / 25%);
    box-shadow: 0 10px 24px rgb(189 189 189 / 19%), 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .psps-tile:hover {
        border-color: rgb(109 180 255 / 45%);
        box-shadow: 0 14px 30px rgb(0 0 0 / 22%), 0 6px 14px rgba(0, 0, 0, 0.08);
    }

    .psps-tile.span-2 {
        grid-column: span 2;
    }

    .psps-tile.title-tile {
        background: rgb(201 207 215);
    }

.psps-tile-header {
    display: block;
    padding-top: 20px;
}

.psps-left {
}

.psps-drag {
    cursor: grab !important;
    border-radius: 5px;
    margin-left: 7px;
}

.psps-title {
    font-weight: 500;
    color: #cff2ff;
    font-size: 12px;
}

.psps-sub {
    font-size: 11px;
    color: rgb(148 163 179);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psps-actions {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 5px;
    top: 3px;
}

.psps-selected > td {
    background: #fff9e2 !important;
}

.psps-sort-placeholder {
    border: 2px dashed rgba(0,0,0,.15);
    border-radius: 12px;
    background: #fafbfd;
    min-height: 52px;
}

.psps-active {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #009f00;
}

.psps-inactive {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: gray;
}

.psps-btn-active:after, .psps-group-active::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #009f00;
    top: 5px;
    left: 5px;
}

.psps-btn-inactive:after, .psps-group-inactive::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: gray;
    top: 5px;
    left: 5px;
}

.psps-script {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
    min-height: 360px !important;
    white-space: nowrap;
}

.btn-psps {
    background: #686868 !important;
    border: none !important;
    padding: 2px 7px !important;
    box-shadow: none !important;
    color: #eee;
}

    .btn-psps:hover {
        color: #afcfff;
        cursor: pointer;
    }

#btnGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.psps-group {
    grid-column: 1 / -1;
    padding: 0px;
    padding-top: 32px;
    margin-bottom: 0px;
    border-color: #6c6c6c;
}

    .psps-group legend {
        padding: 7px 10px;
        font-weight: 700;
        background: #484848;
        color: rgb(173 218 255);
        letter-spacing: .5px;
        text-transform: uppercase;
    }

.psps-group-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 60px;
    padding: 10px 5px;
    background: #202020;
    border-radius: 0px 0px 3px 3px;
}

.psps-sort-placeholder {
    grid-column: 1 / -1;
    border: 2px dashed #999;
    min-height: 50px;
    background: black;
}

.g-title {
    margin-left: 10px;
}

.todo-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

    .todo-preview-header h4 {
        margin: 6px 0 0;
        font-weight: 800;
        color: #111827;
    }

.todo-preview-meta,
.todo-preview-users {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

    /*.todo-preview-users {
    grid-template-columns: repeat(2, 1fr);
}
*/
    .todo-preview-meta > div,
    .todo-preview-users > div,
    .todo-preview-section {
        background: #f9fafb;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 6px;
    }

        .todo-preview-meta label,
        .todo-preview-users label,
        .todo-preview-section label {
            display: block;
            color: #6b7280;
            font-size: 11px;
            font-weight: 800;
        }

.todo-preview-description {
    padding: 10px;
}

.todo-preview-comments {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 14px;
}

    .todo-preview-comments h5 {
        font-weight: 800;
        margin-bottom: 12px;
    }

.todo-assign-repoter {
}

@media(max-width: 768px) {
    .todo-preview-meta, .todo-preview-users {
        grid-template-columns: 1fr;
    }

    .todo-preview-header {
        flex-direction: column;
    }
}

/* Premium theme polish */
body {
    color: var(--md-text-primary);
    background: radial-gradient(circle at 12% 0%, rgba(47, 143, 127, .10), transparent 30%), linear-gradient(180deg, #f7fafc 0%, var(--md-background) 42%, #e8eef3 100%) !important;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.bg-blue-nav {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .22) !important;
}

.navbar-light .navbar-brand {
    letter-spacing: .2px;
}

.bottom-nav {
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18) !important;
}

.sidebar {
    border-right: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 12px 0 30px rgba(15, 23, 42, .12);
}

    .sidebar::before {
        opacity: .08;
    }

.menu-item {
    box-shadow: none;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

    .menu-item .nav-link {
        color: #233142 !important;
        background: var(--md-side-menu-background) !important;
        border: 0 !important;
    }

.lft-list-nav > .submenu-toggle {
    color: #0f3f4a !important;
    background: linear-gradient(90deg, #d9edf1 0%, #f5fbfc 100%) !important;
    border: 0 !important;
    border-left: 4px solid var(--md-primary) !important;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: inset 0 -1px 0 rgba(15, 63, 74, .08);
}

    .lft-list-nav > .submenu-toggle .toggle-icon {
        color: var(--md-primary-dark);
    }

.lft-list-nav:hover > .submenu-toggle {
    background: linear-gradient(90deg, #cce6eb 0%, #ffffff 100%) !important;
    color: var(--md-primary-dark) !important;
}

.lft-list-nav-sub:hover .nav-link {
    background: linear-gradient(90deg, #ffffff 0%, #eaf4f7 100%) !important;
    color: var(--md-primary) !important;
}

.lft-list-nav.active > .nav-link,
.lft-list-nav-sub.active > .nav-link {
    color: var(--md-primary-dark) !important;
    background: #ffffff !important;
    border-left: 4px solid var(--md-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(21, 94, 117, .08);
}

.submenu ul {
    border-left: 4px solid var(--md-submenu);
}

.lft-list-nav-sub {
    background: #eff5f8 !important;
}

.admin-main-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0)), var(--md-background);
}

.material-box,
.page,
.welcome-card,
.workflow-panel,
.todo-preview-section {
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-shadow) !important;
}

.material-box {
    padding: 12px;
}

.material-box-header {
    border-bottom: 1px solid var(--md-border);
    margin-bottom: 10px;
    padding-bottom: 8px;
}

    .material-box-header::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 74px;
        height: 2px;
        background: linear-gradient(90deg, var(--md-accent), rgba(201, 151, 43, 0));
    }

    .material-box-header h4,
    .material-box-header h5,
    .material-box-header h6,
    .pos-band-title,
    .pos-summary-title {
        color: var(--md-primary-dark) !important;
        font-weight: 700 !important;
        letter-spacing: .1px;
    }

        .material-box-header i,
        .pos-band-title i {
            color: var(--md-accent);
        }

.btn-primary i,
.btn-success i,
.dt-button i,
.btn-add-new i,
button.btn-primary i,
button.btn-success i {
    color: #ffffff !important;
}

.btn-outline-primary i,
.btn-outline-success i,
.report-actions .btn-success i {
    color: currentColor !important;
}

.material-box:has(.report-header),
.pos-sales-report,
.cancel-refund-report,
.payment-collection-report,
.raw-stock-movement-report,
.expense-report,
.kitchen-wastage-report,
.profit-food-cost-report {
    border: 1px solid rgba(199, 151, 43, .24) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .10), 0 1px 0 rgba(255, 255, 255, .72) inset !important;
}

.report-header {
    min-height: 48px;
    margin: -2px -2px 12px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92)), linear-gradient(90deg, rgba(201, 151, 43, .16), rgba(20, 53, 101, .08)) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
}

    .report-header::after {
        display: none !important;
    }

    .report-header h4 {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #10233f !important;
        font-size: 17px !important;
        font-weight: 800 !important;
    }

        .report-header h4 i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            color: #8a6417 !important;
            border: 1px solid rgba(201, 151, 43, .30);
            border-radius: 8px;
            background: rgba(255, 248, 225, .85);
        }

.report-actions .btn-success {
    min-width: 92px;
    height: 32px;
    border: 1px solid rgba(20, 53, 101, .36) !important;
    border-radius: 8px !important;
    color: #143565 !important;
    font-weight: 800 !important;
    letter-spacing: .1px;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 8px 18px rgba(20, 53, 101, .10) !important;
}

    .report-actions .btn-success:hover {
        color: #fff !important;
        border-color: #143565 !important;
        background: linear-gradient(135deg, #143565, #1f5f92) !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(20, 53, 101, .20) !important;
    }

.report-filter-bar {
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .90)) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05) !important;
}

    .report-filter-bar .form-control,
    .report-filter-bar .select2-selection {
        border-color: rgba(148, 163, 184, .38) !important;
        border-radius: 7px !important;
        background-color: rgba(255, 255, 255, .96) !important;
    }

    .report-filter-bar .btn-primary {
        border: 0 !important;
        border-radius: 8px !important;
        font-weight: 800;
        background: linear-gradient(135deg, #143565, #1f5f92) !important;
        box-shadow: 0 10px 22px rgba(20, 53, 101, .20) !important;
    }

.report-kpi {
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92)) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

    .report-kpi span {
        color: #64748b !important;
        letter-spacing: .25px;
    }

    .report-kpi strong {
        color: #10233f !important;
        font-weight: 850 !important;
    }

.report-section {
    border: 1px solid rgba(148, 163, 184, .26) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
}

.report-section-title {
    color: #10233f !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(243, 246, 250, .92)) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .24) !important;
}

.report-section th {
    color: #23364f !important;
    background: #f7f9fc !important;
}

.report-section tbody tr:hover td {
    background: rgba(255, 248, 225, .40) !important;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    html,
    body {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    nav,
    .navbar,
    .sidebar,
    .sidebar-toggle-btn,
    .menu-toggle-btn,
    .sidebar-toggle-btn-for-mobile,
    .menu-toggle-btn-for-mobile,
    #top_nav_content,
    #main_nav_content,
    #sidebar,
    #nav-history,
    .modal,
    .modal-backdrop,
    .waitMe,
    .report-actions,
    .report-filter-bar {
        display: none !important;
    }

    .admin-main-content,
    .main-content,
    .main-with-sidebar,
    .main-full,
    .center-adjustment,
    .page,
    .special-gutters,
    .special-col {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .material-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .material-box-header {
        margin: 0 0 8px !important;
        padding: 0 0 6px !important;
        border-bottom: 1px solid #111827 !important;
    }

        .material-box-header::after {
            display: none !important;
        }

        .material-box-header h4,
        .material-box-header h5,
        .material-box-header h6 {
            color: #111827 !important;
            font-size: 18px !important;
        }

    .report-kpi-grid,
    .report-section-grid {
        padding: 0 0 8px !important;
        gap: 6px !important;
        break-inside: avoid;
    }

    .report-kpi {
        padding: 6px 8px !important;
        border: 1px solid #d1d5db !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

        .report-kpi span {
            color: #374151 !important;
            font-size: 9px !important;
        }

        .report-kpi strong {
            color: #111827 !important;
            font-size: 14px !important;
        }

    .report-section {
        margin: 0 0 8px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 0 !important;
        overflow: visible !important;
        break-inside: avoid;
    }

    .report-section-title {
        padding: 5px 7px !important;
        color: #111827 !important;
        background: #f3f4f6 !important;
        border-bottom: 1px solid #d1d5db !important;
    }

    .table-responsive {
        overflow: visible !important;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
    }

    thead {
        display: table-header-group;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    th,
    td {
        padding: 4px 5px !important;
        color: #111827 !important;
        background: #fff !important;
        border-color: #d1d5db !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    th {
        background: #f3f4f6 !important;
        font-weight: 700 !important;
    }

    a[href]::after {
        content: "" !important;
    }
}

.form-control,
.form-select,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--md-text-primary) !important;
    background-color: #ffffff !important;
    border: 1px solid #cfdbe4 !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

    .form-control:focus,
    .form-select:focus,
    .custom-select:focus,
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default .select2-selection--single:focus {
        border-color: var(--md-primary) !important;
        box-shadow: 0 0 0 3px rgba(21, 94, 117, .14) !important;
    }

.floating-label,
.form-floating > label,
.material-input label,
.non-floating-label {
    color: var(--md-primary-dark) !important;
}

.btn {
    border-radius: 7px !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 16px rgba(15, 23, 42, .12);
    }

.btn-primary,
.dt-button {
    color: #ffffff !important;
    background: linear-gradient(180deg, #2c8677 0%, var(--md-primary) 100%) !important;
    border-color: #18574d !important;
}

    .btn-primary:hover,
    .dt-button:hover {
        background: linear-gradient(180deg, #349887 0%, #18574d 100%) !important;
    }

.btn-success {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
    border-color: #166534 !important;
}

.btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
    border-color: #991b1b !important;
}

.btn-warning {
    color: #1f2937 !important;
    background: linear-gradient(180deg, #f4c45d 0%, var(--md-accent) 100%) !important;
    border-color: #b77b14 !important;
}

.material-modal .modal-content,
.modal-content {
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-shadow-lg) !important;
}

.material-modal .modal-header,
.modal-header {
    background-image: var(--md-nav-top-background) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.modal-body {
    background: #f5f8fb !important;
}

.modal-footer {
    border-top: 1px solid var(--md-border);
    background: #ffffff;
}

.tab-content {
    background: #ffffff;
    border-color: var(--md-border);
    border-radius: 0 0 var(--md-radius) var(--md-radius);
}

.nav-tabs .nav-link {
    color: var(--md-text-secondary) !important;
    border-radius: 7px 7px 0 0 !important;
}

    .nav-tabs .nav-link.active {
        color: var(--md-primary-dark) !important;
        border-color: var(--md-border) var(--md-border) #fff !important;
        font-weight: 700;
    }

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

    table.dataTable thead th,
    .dataTables_scrollHead thead th,
    .table thead th {
        color: #233142 !important;
        background: var(--tbl-header-background) !important;
        border-bottom: 1px solid #cbd7df !important;
        font-weight: 700 !important;
    }

    table.dataTable tbody tr,
    .table tbody tr {
        background: #ffffff;
    }

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

    table.dataTable tbody td,
    .table tbody td {
        border-color: #edf2f6 !important;
    }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: #ffffff !important;
    border: 1px solid #cfdbe4 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(180deg, #2c8677 0%, var(--md-primary) 100%) !important;
    border-color: #18574d !important;
    color: #ffffff !important;
}

.badge,
.pos-badge,
.kitchen-status-badge,
.kitchen-preparation-track {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .1px;
}

.dropdown-menu {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow-md);
    overflow: hidden;
}

.dropdown-item:hover {
    background: var(--md-hover-blue);
}

.select2-dropdown {
    border-color: #cfdbe4 !important;
    border-radius: 7px !important;
    box-shadow: var(--md-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--md-primary) !important;
}

.swal2-popup {
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-shadow-lg) !important;
}

.flatpickr-calendar {
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-shadow-md) !important;
}

div:where(.swal2-container).swal2-center > .swal2-popup {
    padding: 10px 20px;
}