@media (min-width: 768px) {
  html {
    /*font-size: 16px;*/
  }
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

html {
    position: relative;
    min-height: 100%;
    height: auto; /* let content grow naturally */
    margin: 0;
    overflow-y: auto; /* ✅ enable vertical scrolling */
    overflow-x: hidden; /* ✅ disable horizontal scrolling */
}

body {
    background-color: #f5f5f5;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    min-height: 100vh; /* ensures background covers full viewport */
}

.login-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.all-title {
    margin-top: 20px; /* adjust to your preferred spacing */
    margin-left: 20px; /* consistent left margin */
}
#txtCurrentPass {
    height: 48px !important;
    border-radius: 15px !important;
}
#txtNewPass {
    height: 48px !important;
    border-radius: 15px !important;
}
#txtNewPass1 {
    height: 48px !important;
    border-radius: 15px !important;
}
.workclass-fixed {
    table-layout: fixed;
    width: 100%;
}

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

        /* Fixed widths for Code and Action columns */
        .workclass-fixed th:nth-child(1),
        .workclass-fixed td:nth-child(1) {
            width: 120px; /* Code column */
        }

        .workclass-fixed th:nth-child(3),
        .workclass-fixed td:nth-child(3) {
            width: 150px; /* Action column */
        }

        /* Name column flexes to fill remaining space */
        .workclass-fixed th:nth-child(2),
        .workclass-fixed td:nth-child(2) {
            width: 100px;
            white-space: normal; /* allow wrapping if needed */
        }


    .full-width-block {
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

.title-text {
    font-size: 1.25rem; /* Larger size */
    font-weight: 500; /* Bold */
    color: #000; /* Black */
}
.subtitle-text {
    font-size: 1rem; /* Smaller size */
    font-weight: 580; /* Regular */
}

.subtitle-textsmall {
    font-size: 1.25rem; /* Smaller size */
    font-weight: 400; /* Regular */
}

.app-sidebar .sidebar-logo img {
    width: 105px;
    height: auto;
    display: block;
    margin: 1rem;
}
.menutitle{
    margin:1rem;
}
.app-sidebar .sidebar-logo a {
    text-decoration: none;
    color: inherit;
    margin-top: 20px;
}

        .app-sidebar .sidebar-logo a:hover {
            text-decoration: none; 
            color: inherit;
        }
/* scrolling bar styles */
/* Chrome, Edge, Safari */
html::-webkit-scrollbar {
    width: 10px; /* scrollbar width */
}

html::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb {
    background-color: #0d6efd; /* thumb color (Bootstrap primary blue) */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* spacing around thumb */
}

    html::-webkit-scrollbar-thumb:hover {
        background-color: #084298; /* darker blue on hover */
    }

/* Firefox */
html {
    scrollbar-width: thin; /* thinner scrollbar */
    scrollbar-color: #0d6efd #f1f1f1; /* thumb + track colors */
}

/* End of scrolling bar style*/

/* Left side bar */
.sidebar.app-sidebar {
    position: relative;
    width: 300px;
    height: 750px; 
    background-color: #fff;
    border-radius: 21px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 1rem 0;
    margin: 20px;
    overflow-x: hidden;
    scrollbar-width: none;
    transition: width 0.3s ease;
}

/* Expanded state */
.sidebar.app-sidebar.sidebar-expanded {
    width: 300px;
}

    /* Collapsed state */
    .sidebar.app-sidebar.sidebar-collapsed {
        width: 80px;
        overflow: hidden;
    }

        /* Hide elements when collapsed (no wrapping) */
        .sidebar.app-sidebar.sidebar-collapsed .sidebar-header,
        .sidebar.app-sidebar.sidebar-collapsed .subtitle-text,
        .sidebar.app-sidebar.sidebar-collapsed .menu-text {
            display: none !important; 
        }

.footer-nav {
    margin-top: 0 !important;
}

    .sidebar.app-sidebar .logo-img {
        max-width: 60px; 
        height: auto;
    }
.nav {
    list-style: none; 
    padding-left: 0; 
    margin: 0; 
}

.nav-item {
    list-style: none; /* ensures no marker on li */
}


    /* Nav links base */
    .sidebar.app-sidebar .nav-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        color: #000;
        border-radius: 10px;
        transition: background-color 0.3s ease, color 0.3s ease;
        margin-right:10px;
        margin-left:10px;

    }

    /* Expanded hover effect */
    .sidebar.app-sidebar.sidebar-expanded .nav-link:hover {
        background-color: #f0f0f0;
        color: #000;
        margin-right:10px;
        margin-left:10px;
    }


    /* Collapsed hover effect */
    .sidebar.app-sidebar.sidebar-collapsed .nav-link:hover {
        background-color: transparent;
        color: inherit;
    }

    /* Collapsed icon style */
    .sidebar.app-sidebar.sidebar-collapsed .nav-link i {
        font-size: 1.4rem;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        background-color: transparent;
        margin-left:-10px;
    }

    /* Collapsed hover effect for icons */
    .sidebar.app-sidebar.sidebar-collapsed .nav-link:hover i {
        background-color: #f5f5f5;
    }

/* Dropdown arrow spacing */
.nav-link .dropdown-arrow {
    margin-left: 7rem;
}

/* Toggle button */
.toggle-btn {
    position: absolute;
    top: 35px;
    right: 18px;
    background: #009688; /* teal background */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff; /* icon color */
    font-size: 18px; /* icon size */
}

    /* hover effect */
    .toggle-btn:hover {
        background-color: #00796B; /* darker teal */
        transform: scale(1.1) rotate(10deg); /* playful tilt */
    }

    /* active (click) effect */
    .toggle-btn:active {
        background-color: #004D40; /* deep teal */
        transform: scale(0.95);
    }


/* Rotate toggle when collapsed */
.sidebar.app-sidebar.sidebar-collapsed .toggle-btn {
    transform: rotate(180deg);
}

.main-content {
    flex: 1;        
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-right:30px;
}
.sidebar.app-sidebar.sidebar-collapsed .menu-text {
    display: none;
}
.sidebar.app-sidebar.sidebar-collapsed .main-menu {
    margin-top: 70px;
}

.sidebar.app-sidebar.sidebar-expanded .main-menu {
    margin-top: 0;
}

.sidebar.app-sidebar .menu-text {
    white-space: nowrap;
}
.sidebar.app-sidebar.sidebar-collapsed .collapse {
    display: none !important;
}
/* End of left side bar*/

/* Dashboard Page Styles */
.dashboard-page .card-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 6px;
    border-radius: 0.25rem 0 0 0.25rem;
}

.dashboard-page .attention-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashboard-page {
    width: 100%; /* full width of viewport */
    max-width: 100%; /* prevent Bootstrap from capping width */
    padding: 0 2rem; /* optional: add some horizontal breathing space */
}

/* Global button style */
.btn-custom {
    background-color: #009688;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}


    .btn-custom:hover {
        background-color: #00796b;
        color: #ffffff;
    }
.btn-customdelete {
    background-color: #880000;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}


    .btn-customdelete:hover {
        background-color: #660e0e;
        color: #ffffff;
    }

/* Login page */
.login_wrapper.login-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.login-logo {
    max-width: 210px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.login_wrapper.login-form {
    max-width: 400px;
}

.custom-login-form {
    padding: 0.75rem;
    caret-color: #000;
}

.custom-login-form .rounded-input {
        height: 48px;
        border-radius: 15px;
}

.logo-box img {
    width: 80px;
    height: auto;
    margin-bottom: 10px;
}
/* End of login page */
/* Text box styles in workclass */
.btn-outline {
    position: relative;
    margin-top: 1.5rem;
}

    .btn-outline .form-control {
        border: none;
        border-bottom: 2px solid #ccc;
        border-radius: 0;
        padding: 6px 0;
        background: transparent;
        box-shadow: none;
    }

    .btn-outline .form-label {
        position: absolute;
        top: -0.75rem;
        left: 0.75rem;
        color: #666;
        transition: all 0.2s ease;
    }

    .btn-outline .form-control:focus {
        border-bottom: 2px solid #009688;
        outline: none;
    }

        .btn-outline .form-control:focus + .form-label {
            color: #009688;
        }

/* End of workclass text box */

/* Workclass Styles */
.workclass{
    border-radius:20px;
}
/* End of Workclass Styles */

/* Workclass-permission Styles */

.wp-headers{

}
/* Inputs and Labels */
.form-control-group {
    text-align: left;
    margin-bottom: 15px;
}

    .form-control-group label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
    }

    .form-control-group input {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px; /* Rounded corners like the design */
        box-sizing: border-box;
        font-size: 14px;
        outline: none;
    }

        .form-control-group input:focus {
            border-color: #00AEEF;
        }

/* popup card style */

/* Popup container */
.msg-popup {
    position: fixed;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #009688;
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

    /* Show state */
    .msg-popup.show {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    /* Hide state (fade + move up) */
    .msg-popup.hide {
        opacity: 0;
        transform: translate(-50%, -70%); /* move up */
    }

    /* Success variant */
    .msg-popup.success {
        background: #4CAF50;
    }

    .msg-popup.error {
        background: #F44336;
    }

    .msg-popup.info {
        background: #2196F3;
    }

    .msg-popup i {
        font-size: 20px;
    }


/* End of popup card style */


/* confirm popup msg styles */

.confirm-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.35);
    z-index: 3000;
    padding: 20px;
}

.confirm-box {
    width: 100%;
    max-width: 390px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    animation: confirmFadeIn 0.2s ease-out;
}

    /* Optional icon */
    .confirm-box::before {
        content: "?";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: #f0fdfa;
        color: #009688;
        font-size: 22px;
        font-weight: 600;
    }

    .confirm-box h3 {
        margin: 0 0 8px;
        color: #111827;
        font-size: 19px;
        font-weight: 600;
    }

    .confirm-box p {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }

.confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.btn-yes,
.btn-no {
    flex: 1;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-yes {
    background: #009688;
    color: #ffffff;
    border: 1px solid #009688;
}

    .btn-yes:hover {
        background: #007f73;
        border-color: #007f73;
    }

.btn-no {
    background: #ffffff;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

    .btn-no:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    .btn-yes:active,
    .btn-no:active {
        transform: translateY(1px);
    }

@keyframes confirmFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* End of confirm popup msg styles */

/* loader styles */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(245,245,245,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loader {
    --color-1: #f5f5f5; /* same as overlay background */
    --color-2: #009688; /* softer white with transparency */
    --size: 1px;
    width: calc(60 * var(--size));
    height: calc(40 * var(--size));
    position: relative;
    display: inline-block;
    --base-color: var(--color-1);
}

    .loader::before {
        content: '';
        left: 0;
        top: 0;
        position: absolute;
        width: calc(36 * var(--size));
        height: calc(36 * var(--size));
        border-radius: 50%;
        background-color: var(--color-2);
        background-image: radial-gradient( circle calc(8 * var(--size)) at calc(18 * var(--size)) calc(18 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(18 * var(--size)) 0, var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at 0 calc(18 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(36 * var(--size)) calc(18 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(18 * var(--size)) calc(36 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(30 * var(--size)) calc(5 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(30 * var(--size)) calc(5 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(30 * var(--size)) calc(30 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(5 * var(--size)) calc(30 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(4 * var(--size)) at calc(5 * var(--size)) calc(5 * var(--size)), var(--base-color) 100%, transparent 0 );
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: rotationBack 3s linear infinite;
    }

    .loader::after {
        content: '';
        left: calc(35 * var(--size));
        top: calc(15 * var(--size));
        position: absolute;
        width: calc(24 * var(--size));
        height: calc(24 * var(--size));
        border-radius: 50%;
        background-color: var(--color-2);
        background-image: radial-gradient( circle calc(5 * var(--size)) at calc(12 * var(--size)) calc(12 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(12 * var(--size)) 0, var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at 0 calc(12 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(24 * var(--size)) calc(12 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(12 * var(--size)) calc(24 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(20 * var(--size)) calc(3 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(20 * var(--size)) calc(3 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(20 * var(--size)) calc(20 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(3 * var(--size)) calc(20 * var(--size)), var(--base-color) 100%, transparent 0 ), radial-gradient( circle calc(2.5 * var(--size)) at calc(3 * var(--size)) calc(3 * var(--size)), var(--base-color) 100%, transparent 0 );
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: rotationBack 4s linear infinite reverse;
    }

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


/* End loader style*/

/* Validation Text */
.error-text {
    color: #d9534f;
    font-size: 12px;
    display: none;
    margin-top: 4px;
}

/* The Blue Login Button */
.btn-primary-login {
    width: 100%;
    padding: 12px;
    background-color: #5D8AA8;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease; /* Smooth transition for all changes */
    outline: none;
}

    /* Active: The 'Click' effect */
    .btn-primary-login:active, .btn-clicking {
        transform: scale(0.97); /* Shrinks slightly when clicked */
        background-color: #3d5a6d;
    }



/* COMBINED & OPTIMIZED ERROR CONTAINER */
.server-error-container {
    display: none; /* Hidden by default */
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    margin: 10px auto 20px auto;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    width: 90%;
    max-width: 320px;
    box-sizing: border-box;
}

    /* This class is added via JavaScript when an error occurs */
    .server-error-container.visible {
        display: block !important;
        animation: shakeEffect 0.4s ease-in-out;
    }

@keyframes shakeEffect {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }
}


/* Field Validation Style (Individual red text) */
.field-validation-error {
    display: none;
    color: #d9534f;
    font-size: 11px;
    margin-top: 4px;
    font-weight: 500;
}

/* Ensure form groups stack vertically */
.form-control-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* Stacks label, input, and error vertically */
    text-align: left;
}

/* This makes the wrapper the reference point for the button */
.password-wrapper {
    position: relative;
    width: 100%;
}

    .password-wrapper input {
        width: 100%;
        padding-right: 50px; /* Space so text doesn't go UNDER the button */
        box-sizing: border-box;
    }


#togglePassword {
    position: absolute;
    right: 12px; /* Distance from the right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #5D8AA8;
    z-index: 5; /* Keeps it above the input */
    user-select: none; /* Prevents highlighting text on double click */
}

/* Sidebar Container */
.wc-sidebar {
    border-radius: 4px;
    background-color: #fff;
}




/* This ensures the card and its list-group fill that height */
.wc-list-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensures the container starts at the exact same pixel from the top */
.wc-list-container, .permission-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

    /* Identical margin for the headlines */
.wc-list-container,
.permission-container {
    margin-top: 0 !important;
    padding: 15px 20px !important; 
}
/* Workclass permission workclass table */
.wc-scroll-container {
    height: auto !important; 
    overflow-y: visible !important; 
}

/* List Item Styling */
.wc-item {
    color: #6c757d;
    padding: 15px 20px;
    border-left: 4px solid transparent !important;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    /* ADD THIS LINE FOR SMOOTHNESS */
    transition: background-color 0.2s ease, border-left 0.2s ease, color 0.2s ease;
}
    .wc-item:hover {
        background-color: #fcfcfc;
    }





/* Edit Card Styling */
.edit-card {
    border-radius: 4px;
    background-color: #ffffff;
}

.form-title {
    color: #333;
    font-size: 0.95rem;
}

/* Custom Input Styling */

/* Professional refinements without changing your settings */
.custom-input, .custom-select, .outstanding-input {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    height: 38px; /* Consistent height */
}

.settings-panel {
    background-color: #ffffff;
    border: 1px solid #f0f0f0 !important; /* Softer border like screenshot */
}

.form-check-input {
    cursor: pointer;
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.3rem;
}



.outstanding-input {
    border: 1px solid #dee2e6 !important;
    background-color: #ffffff !important;
    font-size: 0.85rem;
}

/* Panel Background */
.settings-panel {
    background-color: #ffffff;
    border-color: #f1f1f1 !important;
}


/* Checkbox Styling */
.custom-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    border-color: #adb5bd !important;
}


.perm-header {
    background-color: white;
    color: black;
    padding: 12px 15px;
    border-radius: 12px;
    
}

.perm-card {
    border: 1px solid #eef2f5;
    border-radius: 4px;
    overflow: hidden; /* This prevents the content from "breaking" the borders during transition */
}
/*------------------- Finance page1 style ------------------------------------------*/
/*--------------Search Bar Styling---------------------------------*/
.financeSearchbar {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 12px;
    width: 100%;
}

.financeSearch-box {
    padding-right: 35px;
}

.fianceSearch-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 14px;
    pointer-events: none;
}
.search-section {
    width: 100%;
}


/*----------customer information in finance page01----------------*/
.customer-card {
    border: 1px solid rgba(0, 0, 0, 0.175);
    box-shadow: none;
}

    .customer-card .card-header {
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.175);
    }

.customer-card .info-group {
    display: flex;
    flex-direction: column;
}

.customer-card .info-label {
    margin-bottom: 6px;
}

.customer-card .info-value {
    background-color: #f8f9fa;
    padding: 10px 14px;
    border-radius: 8px;
    color: #212529;
}


/*-----Product table in Finance page01-------------*/
.product-table {
    --bs-table-bg: transparent; 
}

    .product-table thead {
        background-color: #94979E;
        color: #fff;
    }


.productListBtn .btn-select {
    background-color: #1f5f7a;
    color: #fff;
    padding: 5px 18px;
    border-radius: 5px;
}

.productListBtn .btn-select:hover {
    background-color: #174a5f;
}
.product-table th,
.product-table td {
    text-align: center;
    vertical-align: middle;
}

.productListBtn tr:nth-child(even) {
    background-color: #C4C4C4 !important;
    
}

.product-table .productListBtn tr:nth-child(2) td:first-child {
    border-bottom-left-radius: 0.300rem;
}

.product-table .productListBtn tr:nth-child(2) td:last-child {
    border-bottom-right-radius: 0.300rem;
}
.product-table .productListBtn tr:nth-child(2) td {
    border-bottom: none;
}
tbody.productListBtn.title-sm td {
    color: inherit !important; 
}

/*----------------------------------------------*/



.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 16px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: #4CAF50;
}

    input:checked + .slider:before {
        transform: translateX(18px);
    }


/* CSS Logic for Folding/Stretching */
.perm-toggle-input {
    display: none; /* Hide the actual checkbox */
}

    /* Collapse Content when checkbox is NOT checked */
    .perm-toggle-input:not(:checked) ~ .perm-content {
        display: none;
    }

    /* Rotate Chevron when checkbox is NOT checked */
    .perm-toggle-input:not(:checked) ~ .perm-header .chevron-icon {
        transform: rotate(180deg);
    }

.chevron-icon {
    transition: transform 0.3s ease;
}

/* Keeping your header styling consistent */
.perm-header {
    cursor: pointer;
    user-select: none;
}



/* Ensure the container takes full height */


@media (min-width: 992px) {
    /* Ensures both columns are exactly the same height on large screens */
    .row {
        display: flex;
        align-items: stretch;
    }



    /* CSS to handle the selection highlight in your Work Class List */
    /* Use this single block for the selected role */
    .wc-item.active-link {
        background-color: #1a5d7c !important;
        color: white !important;
        border-left: 4px solid #1D5C7E !important;
        font-weight: bold;
    }


    /* Keeps the button looking clean and removes the selection frame */
    .PermissionSave:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* This creates the "Pressed" feel */
    .PermissionSave:active {
        transform: translateY(2px) scale(0.98) !important; /* Moves down 2px and shrinks slightly */
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.2) !important; /* Adds an internal shadow for depth */
        background-color: #144a63 !important; /* Darkens the blue slightly while pressed */
    }

    /* Smooth transition for the effect */
    .PermissionSave {
        transition: transform 0.1s ease, background-color 0.2s ease;

    }
    /*-------------------Finance page2 styles-------------------------------------------------------*/
    /* Page Background */
    .finance-page2 {
        background-color: #f4f6f9;
        min-height: 100vh;
        padding: 20px;
    }

    /* Cards */
    .finance-page2 .custom-card {
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .finance-page2 .section-header {
        background-color: #ffffff;
        border-bottom: 1px solid #e5e5e5;
    }

    /* Table Header */
    .finance-page2 .table-header {
        color: #444;
        margin-bottom: 10px;
    }

    /* Breadcrumb */
    .finance-page2 .custom-breadcrumb {
        background: none;
        padding: 0;
        margin-bottom: 0;
    }

    /* Buttons */
    .finance-page2 .btn-primary {
        background-color: #1f4e79;
        border-color: #1f4e79;
    }

        .finance-page2 .btn-primary:hover {
            background-color: #163a5c;
            border-color: #163a5c;
        }

    .finance-page2 .btn-success {
        background-color: #1f4e79;
        border-color: #1f4e79;
    }

    .finance-page2 .btn-danger {
        background-color: #dc3545;
    }

    /* Form Controls */
    .finance-page2 .form-control,
    .finance-page2 .form-select {
        height: 38px;
        border-radius: 6px;
    }

    /* Labels */
    .finance-page2 .form-label {
        margin-bottom: 4px;
    }
}
/*---------------FinanceItem styles---------------------*/


/* ════════════════════════════════════════════════
   FINANCE ITEM PAGE — finance-item.css
   All styles scoped under .finance-item-wrapper
   No changes to site.css or global styles
   ════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────── */
.finance-item-wrapper .finance-card {
    border: 1px solid #dde4ed;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* ── Card header bar ────────────────────────────── */
.finance-item-wrapper .finance-card-header {
    background-color: #74a2b5;
    color: #ffffff;
    border-bottom: none;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
}


    .finance-item-wrapper .finance-card-header .bi {
        color: rgba(255, 255, 255, 0.85);
    }

/* ── Agreement Details labels ───────────────────── */
.finance-item-wrapper .finance-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Agreement Details inputs ───────────────────── */
.finance-item-wrapper .finance-card .card-body .form-control {
    font-size: 0.82rem;
    color: #2c3549;
}

/* ════════════════════════════════════════════════
   VEHICLE DETAILS CARD — single row, compact
   ════════════════════════════════════════════════ */
.finance-item-wrapper .finance-card .card-body .finance-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-end;
    margin: 0;
}

    .finance-item-wrapper .finance-card .card-body .finance-row > [class*="col-"] {
        flex: 1 1 0;
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
    }

    .finance-item-wrapper .finance-card .card-body .finance-row > .col-lg-2 {
        flex: 0 0 120px;
        max-width: 120px;
    }

.finance-item-wrapper .finance-vd-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-item-wrapper .finance-card .card-body .finance-row .form-control,
.finance-item-wrapper .finance-card .card-body .finance-row .form-select {
    height: 34px;
    font-size: 0.78rem;
    padding: 4px 7px;
    border-radius: 5px;
    border: 1px solid #dde1ea;
    background-color: #fff;
    color: #2c3549;
    box-shadow: none;
    transition: border-color 0.15s;
    width: 100%;
    min-width: 0;
}

    .finance-item-wrapper .finance-card .card-body .finance-row .form-control:focus,
    .finance-item-wrapper .finance-card .card-body .finance-row .form-select:focus {
        border-color: #448ddb;
        box-shadow: 0 0 0 2px rgba(68, 141, 219, 0.12);
        outline: none;
    }

.finance-item-wrapper .finance-card .card-body .finance-row .col-lg-2 .btn {
    height: 34px;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 8px;
    border-radius: 5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ════════════════════════════════════════════════
   ADDED VEHICLES — CSS Grid table
   ════════════════════════════════════════════════ */
.vlt-header,
.vlt-row {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 0.8fr 1.6fr 1.6fr 1.1fr 0.9fr 80px;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
}

.vlt-header {
    background: #f6f8fb;
    border-bottom: 2px solid #edf0f5;
    font-weight: 700;
    font-size: 0.68rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vlt-row {
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.76rem;
    color: #2c3549;
    transition: background 0.15s;
}

    .vlt-row:last-child {
        border-bottom: none;
    }

    .vlt-row:hover {
        background: #f9fafc;
    }

.vlt-col {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vlt-price {
    font-weight: 600;
    color: #1a5276;
}

.vlt-col-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

    .vlt-col-actions .fi-btn-edit {
        background-color: #448ddb;
        color: #fff;
        border: none;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s;
        font-size: 0.82rem;
    }

        .vlt-col-actions .fi-btn-edit:hover {
            background-color: #2d78cc;
        }

    .vlt-col-actions .fi-btn-delete {
        background-color: #fdecea;
        color: #c0392b;
        border: 1px solid #f0d0cc;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        font-size: 0.82rem;
    }

        .vlt-col-actions .fi-btn-delete:hover {
            background-color: #dc143c;
            color: #fff;
            border-color: #dc143c;
        }

        .vlt-col-actions .fi-btn-delete:hover {
            background-color: #dc143c;
            color: #fff;
            border-color: #dc143c;
        }

.field-error {
    display: none;
    color: red;
    font-size: 12px;
    margin-top: 3px;
}

/*Customer Registration*/
.cus-reg-body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}



.cus-reg-main-container {
    max-width: 1050px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
}



/*.cus-reg-title {

    font-size: 1.5rem;

    color: #334e68;

    margin-bottom: 20px;

}*/



/* Toolbar container alignment */
.cus-reg-toolbar {
    display: flex;
    justify-content: space-between; /* Keeps search on left, buttons on right */
    align-items: center;
    margin-bottom: 20px; /* Space between the toolbar and the white box below */
    padding: 0 5px; /* Matches the alignment of the container below */
}


/* The rounded 'pill' wrapper */
.cus-reg-search-box-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 30px; /* Creates the pill shape seen in the image */
    padding: 4px 20px;
    gap: 20px;
    background-color: #fff;
    width: fit-content;
}
/* Internal radio label alignment */
.cus-reg-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    margin: 0;
}
/* The input container inside the wrapper */
.cus-reg-input-with-icon {
    display: flex;
    align-items: center;
}
/* The specific search input field */
.cus-reg-search-field {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 13px;
    outline: none;
    width: 180px; /* Keeps the search box neat and consistent */
    transition: border-color 0.2s;
}

    /* Blue border on focus (matches your other boxes) */
    .cus-reg-search-field:focus {
        border-color: #86b7fe;
    }



/* --- Buttons Section --- */

.cus-reg-btn-search,
.cus-reg-btn-add,
.cus-reg-btn-save {
    /* Use flex to center text regardless of element type */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Exact sizing */
    width: 110px; /* Matches the width of the search button in your image */
    height: 38px; /* Fixed height forces them to be identical */

    background-color: #2d6a8e;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; /* Removes underline from the 'Add New' link */

    padding: 0; /* Remove padding so height/width take full control */
    box-sizing: border-box;
}

    /* Added active state for click feedback */
    .cus-reg-btn-search:active,
    .cus-reg-btn-add:active,
    .cus-reg-btn-save:active {
        background-color: #1a4d75; /* Darker blue when clicked */
        transform: translateY(1px); /* Slight movement to feel clickable */
    }



    .cus-reg-btn-search:hover,
    .cus-reg-btn-add:hover,
    .cus-reg-btn-save:hover {
        background-color: #1a4d75;
        text-decoration: none;
    }



/* Container to keep them aligned on the same baseline */

.cus-reg-action-buttons {
    display: flex;
    gap: 10px; /* Space between Search and Add New buttons */
    margin-left: 20px;
    margin-bottom: 4px;
    padding: 0 5px;
}


.cus-reg-form-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}



/* --- Label Styling (The text above the boxes) --- */

.cus-reg-field-label {
    font-size: 12px;
    font-weight: 500; /* Reduced from Bold (700) to Medium (500) */

    color: #555;
    margin-bottom: 5px;
    display: inline-block;
}


.NICVali {
    color: red;
    font-size: 12px;
    display: none
}



/* Styling for Address, Additional Details, and Approach boxes */
#txtAddress,
#txtAdditional\ Details,
#txtHow\ To\ Approach\ From\ Popular\ Location {
    width: 100%;
    height: 75px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 13px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: none;
    display: block;
}

    /* Keeps only the blue border color when clicking inside */
    #txtAddress:focus,
    #txtAdditional\ Details:focus,
    #txtHow\ To\ Approach\ From\ Popular\ Location:focus {
        outline: none;
        border-color: #86b7fe;
    }
    textarea.form-control {
        resize: none;
    }



.cus-reg-row-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}



.cus-reg-row-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cus-reg-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.required-star {
    color: red;
    margin-left: 5px;
}

.error-msg {
    color: red;
    font-size: 12px;
    display: none;
}
/* Hidden by default */
.input-validation-error {
    border: 1px solid red !important;
}



/*Reset Password Screen*/

/* Container Layout */
.reset-page-wrapper {
    display: flex;
    justify-content: center;
   /* padding: 40px 0; */
}

.reset-form-container {
    padding: 30px;
    border-radius: 8px;
}

/* Typography */
.reset-title {
    color: #333;
    font-weight: 700;
    margin-bottom: 5px;
}

.reset-subtitle {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Input Styling */
.reset-input-group {
    margin-bottom: 20px;
}

.reset-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}

.reset-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s;
}

    .reset-control:focus {
        border-color: #007bff;
        outline: none;
    }

/* Error States */
.reset-error-msg {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
}

/* This targets the field specifically when current password is wrong */
.is-invalid-field {
    border: 2px solid #dc3545 !important;
    background-color: #fff8f8;
}

/* Button Styling */
.btn-reset-submit {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-reset-submit:hover {
        background-color: #0056b3;
    }

/*-------------Common Button style---------------------------*/

.productBtn {
    background-color: #1f5d75;
    border: none;
    color: #fff;
    border-radius:3px;
}

    .productBtn:hover {
        background-color: #17495c;
    }

.productBtn {
    padding: 8px 16px;
}

/*----------------------Form styles in Guarator screen-------------------------------------*/
textarea.form-control {
    min-height: calc(1.5em + 3.75rem + calc(var(--bs-border-width) * 2)) !important;
}

/*------------------------------------------------------------------------------------------------*/

/*Payment Page*/

/* ==========================================================================
   1. GLOBAL & LAYOUT
   ========================================================================== */
.Payment__container {
    max-width: 1200px;
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #fdfdfd;
    color: #333;
    padding: 20px;
}

/* Update the parent header */
.Payment__top-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

/* Force the breadcrumb to stay on the left without growing */
.Payment__breadcrumb {
    flex: 1; /* This pushes everything else to the right, but we want the bar centered */
    font-weight: bold;
    font-size: 1.1rem;
    color: #444;
}

/* ==========================================================================
   2. SEARCH BAR CLASSES (Isolated)
   ========================================================================== */
.PaymentSearch__container {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    padding: 2px 12px;
    height: 38px;
    gap: 15px;
}

.PaymentSearch__options {
    display: flex;
    align-items: center;
    gap: 12px;
}

.PaymentSearch__control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.PaymentSearch__label {
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
}

.PaymentSearch__radio {
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 0;
}

.PaymentSearch__divider {
    width: 1px;
    height: 20px;
    background-color: #ddd;
    margin: 0 5px;
}

.PaymentSearch__input-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
}

.PaymentSearch__field {
    border: none !important; /* Critical: Stops other input styles interfering */
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    width: 100%;
    padding-right: 30px;
}

.PaymentSearch__button {
    position: absolute;
    right: 0;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .PaymentSearch__button:hover {
        color: #333;
    }

/* ==========================================================================
   3. INFORMATION CARD & GRID CLASSES
   ========================================================================== */
.Payment__info-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.Payment__section-title {
    margin: 0 0 20px 0;
    font-size: 0.95rem;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.Payment__grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.Payment__grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 35px;
}

.Payment__input-group-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

    .Payment__input-group-row label {
        text-align: left;
        flex: 1;
        font-size: 0.85rem;
        font-weight: 600;
    }



/*---------------------------------------------------------*/

/*Pop up*/

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    z-index: 1060;
    backdrop-filter: blur(3px);
    animation: fadeInOverlay 0.2s ease;
}

    .popup-overlay.show {
        display: flex;
    }

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===================== POPUP BOX ===================== */
.popup-box {
    width: 440px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    padding: 0;
    overflow: hidden;
    animation: slideUpBox 0.25s ease;
}

@keyframes slideUpBox {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/*-------------------Customer auth style------------------------*/

/*-----------------------------------------*/


.modal-body {
    max-height: 500px; /* or any height you prefer */
    overflow-y: auto; /* enable vertical scrolling */
}



/* Header */
.fc-card-header {
    background: linear-gradient(90deg, #4a9aaa, #3d8a9a);
}

/* Read-only computed fields */
.fc-readonly {
    background-color: #f5f7fa !important;
    color: #2e7d8c !important;
    font-weight: 600;
    cursor: not-allowed;
}

/* Calculate button */


/* Result boxes */
.fc-result-box {
    background: #f5f7fa;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 14px 16px;
}

    .fc-result-box .fc-result-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #888;
        margin-bottom: 4px;
    }

    .fc-result-box .fc-result-value {
        font-weight: 700;
        color: #2e7d8c;
        font-size: 15px;
    }

    .fc-result-box .fc-result-sub {
        font-size: 11px;
        color: #aaa;
        margin-top: 2px;
    }

    /* Highlighted monthly installment box */
    .fc-result-box.fc-highlight {
        background: linear-gradient(135deg, rgba(74,154,170,0.07), rgba(46,125,140,0.13));
        border-color: rgba(74, 154, 170, 0.35);
    }

        .fc-result-box.fc-highlight .fc-result-value {
            color: #1f6272;
            font-size: 18px;
        }
#fc-vehicle::-webkit-outer-spin-button,
#fc-vehicle::-webkit-inner-spin-button,
#fc-down::-webkit-outer-spin-button,
#fc-down::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#fc-vehicle,
#fc-down {
    -moz-appearance: textfield;
}

#fc-results .row {
    align-items: stretch;
}

#fc-results .fc-result-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*---------Aggrement AUth Table Style--------------*/



/* Scoped only to buttons inside .agreement-actions */
.agreement-actions .btn-accept,
.agreement-actions .btn-delete {
    padding: .30rem .8rem !important; /* matches Bootstrap btn-sm */
}


.btn-view:hover,
.btn-accept:hover {
    border-color: #2067b4 !important;
    color: white !important;
}




/*---------------Aggrement pending table---------------------*/




/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ---------- Navbar ---------- */


/* ---------- Top Nav Row (Search Bar Row) ---------- */


/* ---------- Main ---------- */

/* ===================== PASSWORD RESET PAGE ===================== */

/* Input wrapper for show/hide toggle button */
.pw-reset-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .pw-reset-input-wrap .reset-control {
        width: 100%;
        padding-right: 42px;
    }

/* Show / Hide toggle button inside input */
.pw-reset-toggle-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: color 0.2s;
}

    .pw-reset-toggle-btn:hover {
        color: #374151;
    }

/* Red error text shown under each field */
.pw-reset-field-error {
    display: none;
    color: #dc2626;
    font-size: 0.78rem;
    margin-top: 4px;
}

/* Red error text shown below the Update button (server/AJAX errors) */
.pw-reset-server-error {
    display: none;
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 8px;
    text-align: center;
}

/* Live password rules block */
.pw-reset-rules {
    margin-top: 6px;
    padding: 8px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

    .pw-reset-rules.pw-reset-all-valid {
        display: none !important;
    }

/* Individual rule row */
.pw-reset-rule {
    font-size: 0.77rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    transition: color 0.2s;
}

    .pw-reset-rule::before {
        content: "✕";
        font-size: 0.7rem;
        width: 14px;
        text-align: center;
    }

/* Rule passed state */
.pw-reset-rule-pass {
    color: #16a34a !important;
}

    .pw-reset-rule-pass::before {
        content: "✓" !important;
        color: #16a34a !important;
    }

/* Rule failed state */
.pw-reset-rule-fail {
    color: #dc2626;
}

    .pw-reset-rule-fail::before {
        content: "✕";
        color: #dc2626;
    }

/* Success popup message text */
.pw-reset-popup-text {
    font-size: 1rem;
    color: #374151;
    margin-top: 14px;
    margin-bottom: 4px;
    font-weight: 500;
    text-align: center;
}

/*------------------------------*/

.wc-item.active {
    background-color: #1a5d7c !important;
    color: #fff !important; /* makes text readable */
}


/*-----------------------------*/
.agreement-row td {
    padding: 5px 0.5rem !important;
}

textarea[readonly] {
    border: none;
    background-color: transparent;
    resize: none;
}

    textarea[readonly]:focus {
        outline: none;
        box-shadow: none;
    }


/*Admin Setup pages*/



.dpgsetup-wrapper {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #1f2937;
    padding: 0;
    font-size: 13px;
}

/* ---------- Breadcrumb ---------- */
.dpgsetup-breadcrumb {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

    .dpgsetup-breadcrumb .dpgsetup-breadcrumb-current {
        font-weight: 700;
    }

/* ---------- Tabs ---------- */
.dpgsetup-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    background-color: #dde3ec;
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
    min-width: 300px;
    margin-bottom: 12px;
}

.dpgsetup-tab {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #838ea0;
    cursor: pointer;
    text-align: center;
    user-select: none;
    border-radius: 7px;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .dpgsetup-tab:hover:not(.dpgsetup-tab-active) {
        color: #4b5568;
    }

    .dpgsetup-tab.dpgsetup-tab-active {
        background-color: #ffffff;
        color: #111827;
        box-shadow: 0 1px 4px rgba(17, 24, 39, 0.10);
    }

/* ---------- Outer panel that holds the swapped partial ---------- */
.dpgsetup-panel {
    background-color: transparent;
}

#dpgsetup-content {
    min-height: 320px;
}

/* ---------- Card / Box (rendered by each partial) ---------- */
.dpgsetup-box {
    background-color: #f3f4f6;
    border: 1px solid #d3d5db;
    border-radius: 10px;
    padding: 16px;
    position: relative;
    min-height: 300px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.dpgsetup-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dpgsetup-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* ---------- Buttons ---------- */
.dpgsetup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: #17a2a0;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

    .dpgsetup-btn:hover {
        background-color: #128a88;
    }

    .dpgsetup-btn:active {
        opacity: 0.85;
    }

.dpgsetup-btn-new {
    position: absolute;
    top: -42px;
    right: 0;
}

.dpgsetup-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    max-width: 500px;
}

.dpgsetup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dpgsetup-icon-new::before {
    content: "+";
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.dpgsetup-icon-save::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'><path fill='white' d='M5 3h11l3 3v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v4h8V5H7zm-1 8v6h12v-6H6z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.dpgsetup-icon-clear::before {
    content: "\2715"; /* x mark */
    font-size: 10px;
    line-height: 1;
}

.dpgsetup-box-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.dpgsetup-list-panel {
    background-color: #ffffff;
    border: 1px solid #dcdee4;
    border-radius: 8px;
    padding: 10px;
    width: 160px;
    min-height: 260px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.dpgsetup-list-item {
    background-color: #dcdcdc;
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .dpgsetup-list-item:hover {
        background-color: #cfcfcf;
    }

    .dpgsetup-list-item.dpgsetup-list-item-selected {
        background-color: #b9d9d6;
    }

.dpgsetup-form {
    flex: 1;
    padding-top: 2px;
}

.dpgsetup-form-select-row {
    margin-bottom: 16px;
    max-width: 200px;
}

.dpgsetup-select {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    background-color: #ffffff;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%23555'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.dpgsetup-field {
    margin-bottom: 16px;
    max-width: 500px;
}

    .dpgsetup-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }

.dpgsetup-input {
    width: 100%;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    background: #ffffff;
    font-size: 13px;
    padding: 7px 10px;
    color: #111827;
    box-sizing: border-box;
}

    .dpgsetup-input:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

@media (max-width: 900px) {
    .dpgsetup-box-body {
        flex-direction: column;
    }

    .dpgsetup-list-panel {
        width: 100%;
    }
}

.dpgsetup-btn-delete {
    background-color: #e0524b;
}

    .dpgsetup-btn-delete:hover {
        background-color: #c9433c;
    }

.dpgsetup-icon-delete::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='13' height='13'><path fill='white' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1v-8h-1zm4 0v8h1v-8h-1z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.dpgsetup-icon-import {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}



.dpgsetup-multiselect-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
    margin-bottom: 24px;
}

    .dpgsetup-multiselect-row .dpgsetup-select {
        width: 160px;
    }

.dpgsetup-underline-field {
    max-width: 500px;
    margin-bottom: 20px;
}

    .dpgsetup-underline-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 6px;
    }

.dpgsetup-underline-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #111827;
    background: transparent;
    font-size: 13px;
    padding: 6px 2px;
    color: #111827;
    box-sizing: border-box;
}

    .dpgsetup-underline-input:focus {
        outline: none;
        border-bottom-color: #17a2a0;
    }

    .dpgsetup-underline-input:disabled {
        color: #9aa0ab;
        border-bottom-color: #d3d5db;
    }

.dpgsetup-radio-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 20px;
}

.dpgsetup-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

    .dpgsetup-radio-label input[type="radio"] {
        accent-color: #17a2a0;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

.dpgsetup-box {
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
}

.dpgsetup-list-panel {
    max-height: 340px;
    overflow-y: auto;
}

.dpgsetup-underline-field label {
    letter-spacing: 0.01em;
}

.dpgsetup-btn {
    letter-spacing: 0.02em;
}



#shipmentList.dpgsetup-list-panel {
    width: 180px;
    height: 460px;
    max-height: 460px;
}

.dpgsetup-form-compact .dpgsetup-underline-field {
    margin-bottom: 10px;
}

    .dpgsetup-form-compact .dpgsetup-underline-field label {
        margin-bottom: 3px;
        font-size: 12.5px;
    }

.dpgsetup-form-compact .dpgsetup-underline-input {
    padding: 4px 2px;
    font-size: 13px;
}

.dpgsetup-form-compact .dpgsetup-radio-row {
    margin-top: 12px;
}

#shipmentList.dpgsetup-list-panel {
    width: 180px;
    height: auto;
    min-height: 260px;
}

/*---------------Shipment page: full-width fields + stretched list---------------*/

.dpgsetup-box:has(#shipmentList) .dpgsetup-box-body {
    align-items: stretch;
}

#shipmentList.dpgsetup-list-panel {
    height: auto;
    min-height: 0;
}

.dpgsetup-form-compact .dpgsetup-underline-field {
    max-width: 700px;
}

.dpgsetup-form-compact .dpgsetup-form-actions {
    max-width: 700px;
}

.dpgsetup-box-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}


/*Vehicle*/

/*---------------Vehicle / Chassis Reference page---------------*/

.dpgsetup-vehicle-fields-row {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

    .dpgsetup-vehicle-fields-row .dpgsetup-underline-field {
        max-width: 260px;
        margin-bottom: 0;
        flex: 1;
        min-width: 200px;
    }

.dpgsetup-vehicle-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.dpgsetup-field-error {
    display: none;
    color: #dc2626;
    font-size: 11px;
    margin-top: 4px;
}

    .dpgsetup-field-error.show {
        display: block;
    }

.dpgsetup-vehicle-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

    .dpgsetup-vehicle-table th {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        color: #4b5568;
        padding: 10px 8px;
        border-bottom: 2px solid #dde3ec;
    }

    .dpgsetup-vehicle-table td {
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        padding: 12px 8px;
        border-bottom: 1px solid #edf0f5;
    }

    .dpgsetup-vehicle-table tbody tr {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

        .dpgsetup-vehicle-table tbody tr:hover {
            background-color: #f7faff;
        }

        .dpgsetup-vehicle-table tbody tr.dpgsetup-row-selected {
            background-color: #e6f6f4;
        }


/*---------------Catalog Part page (fully scoped, catpart- prefix)---------------*/

.catpart-wrapper {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #1f2937;
    font-size: 13px;
}

.catpart-breadcrumb {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.catpart-box {
    background-color: #f3f4f6;
    border: 1px solid #d3d5db;
    border-radius: 10px;
    padding: 16px;
}

.catpart-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.catpart-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ---------- Select (Catalog dropdown) ---------- */
.catpart-select {
    width: 150px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 400;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    background-color: #ffffff;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%23555'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    flex-shrink: 0;
}

    .catpart-select:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

/* ---------- Search bar ---------- */
.catpart-search-wrap {
    position: relative;
    width: 280px;
}

.catpart-search {
    width: 100%;
    padding: 6px 34px 6px 10px;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    font-size: 13px;
    background-color: #ffffff;
    color: #111827;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

    .catpart-search::placeholder {
        color: #9aa0ab;
    }

    .catpart-search:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

.catpart-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #9aa0ab;
}

    .catpart-search-icon svg {
        width: 15px;
        height: 15px;
        display: block;
    }

/* ---------- Buttons ---------- */
.catpart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: #17a2a0;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

    .catpart-btn:hover {
        background-color: #128a88;
    }

    .catpart-btn:active {
        opacity: 0.85;
    }

.catpart-btn-delete {
    background-color: #e0524b;
}

    .catpart-btn-delete:hover {
        background-color: #c9433c;
    }

.catpart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.catpart-icon-new::before {
    content: "+";
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.catpart-icon-save::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'><path fill='white' d='M5 3h11l3 3v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v4h8V5H7zm-1 8v6h12v-6H6z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.catpart-icon-clear::before {
    content: "\2715";
    font-size: 10px;
    line-height: 1;
}

.catpart-icon-delete::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='13' height='13'><path fill='white' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1v-8h-1zm4 0v8h1v-8h-1z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

/* ---------- Body layout: list (left) + form (right) ---------- */
.catpart-box-body {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.catpart-list-panel {
    background-color: #ffffff;
    border: 1px solid #dcdee4;
    border-radius: 8px;
    padding: 10px;
    width: 160px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow-y: auto;
}

.catpart-list-item {
    background-color: #dcdcdc;
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .catpart-list-item:hover {
        background-color: #cfcfcf;
    }

    .catpart-list-item.catpart-list-item-selected {
        background-color: #b9d9d6;
    }

/* ---------- Form area ---------- */
.catpart-form {
    flex: 1;
    padding-top: 2px;
}

.catpart-image-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.catpart-image-preview {
    width: 90px;
    height: 90px;
    background-color: #eef0f3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

    .catpart-image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.catpart-image-placeholder {
    color: #b7bcc6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catpart-choose-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #17a2a0;
    color: #17a2a0;
    background: #fff;
    border-radius: 16px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .catpart-choose-file-btn:hover {
        background-color: #eafaf9;
    }

.catpart-field {
    margin-bottom: 16px;
    max-width: 700px;
}

    .catpart-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 6px;
    }

.catpart-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #c9ccd4;
    background: transparent;
    font-size: 13px;
    padding: 6px 2px;
    color: #111827;
    box-sizing: border-box;
}

    .catpart-input:focus {
        outline: none;
        border-bottom-color: #17a2a0;
    }

.catpart-field-error {
    display: none;
    color: #dc2626;
    font-size: 11px;
    margin-top: 4px;
}

    .catpart-field-error.show {
        display: block;
    }

.catpart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    max-width: 700px;
}

/* ---------- Responsive tweak ---------- */
@media (max-width: 900px) {
    .catpart-box-body {
        flex-direction: column;
    }

    .catpart-list-panel {
        width: 100%;
    }
}

/*---------------Shipment Part page (fully scoped, shippart- prefix)---------------*/

.shippart-wrapper {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #1f2937;
    font-size: 13px;
}

.shippart-breadcrumb {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.shippart-select-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.shippart-select {
    width: 160px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    background-color: #ffffff;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%23555'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

    .shippart-select:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

.shippart-fields-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 40px;
    margin-bottom: 20px;
}

.shippart-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.shippart-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdee4;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 13px;
    color: #111827;
    box-sizing: border-box;
}

    .shippart-input:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

.shippart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 24px;
}

.shippart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 16px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: #17a2a0;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

    .shippart-btn:hover {
        background-color: #128a88;
    }

    .shippart-btn:active {
        opacity: 0.85;
    }

.shippart-btn-delete {
    background-color: #e0524b;
}

    .shippart-btn-delete:hover {
        background-color: #c9433c;
    }

.shippart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.shippart-icon-new::before {
    content: "+";
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.shippart-icon-save::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'><path fill='white' d='M5 3h11l3 3v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v4h8V5H7zm-1 8v6h12v-6H6z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.shippart-icon-delete::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='13' height='13'><path fill='white' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1v-8h-1zm4 0v8h1v-8h-1z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.shippart-box {
    background-color: #ffffff;
    border: 1px solid #dcdee4;
    border-radius: 10px;
    padding: 16px;
}

.shippart-box-header {
    margin-bottom: 12px;
}

.shippart-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.shippart-table {
    width: 100%;
    border-collapse: collapse;
}

    .shippart-table th {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        color: #4b5568;
        padding: 10px 8px;
        border-bottom: 2px solid #dde3ec;
        white-space: nowrap;
    }

    .shippart-table td {
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        padding: 12px 8px;
        border-bottom: 1px solid #edf0f5;
        white-space: nowrap;
    }

    .shippart-table tbody tr {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

        .shippart-table tbody tr:hover {
            background-color: #f7faff;
        }

        .shippart-table tbody tr.shippart-row-selected {
            background-color: #e6f6f4;
        }

@media (max-width: 1100px) {
    .shippart-fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/*---------------Part Items page (fully scoped, partitem- prefix)---------------*/

.partitem-wrapper {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #1f2937;
    font-size: 13px;
}

.partitem-breadcrumb {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.partitem-box {
    background-color: #f3f4f6;
    border: 1px solid #d3d5db;
    border-radius: 10px;
    padding: 16px;
}

.partitem-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.partitem-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.partitem-select {
    width: 150px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    background-color: #ffffff;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%23555'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    flex-shrink: 0;
}

    .partitem-select:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

.partitem-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: #17a2a0;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

    .partitem-btn:hover {
        background-color: #128a88;
    }

    .partitem-btn:active {
        opacity: 0.85;
    }

.partitem-btn-delete {
    background-color: #e0524b;
}

    .partitem-btn-delete:hover {
        background-color: #c9433c;
    }

.partitem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.partitem-icon-new::before {
    content: "+";
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.partitem-icon-save::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'><path fill='white' d='M5 3h11l3 3v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v4h8V5H7zm-1 8v6h12v-6H6z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.partitem-icon-clear::before {
    content: "\2715";
    font-size: 10px;
    line-height: 1;
}

.partitem-icon-delete::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='13' height='13'><path fill='white' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1v-8h-1zm4 0v8h1v-8h-1z'/></svg>");
    display: inline-flex;
    line-height: 1;
}

.partitem-box-body {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.partitem-list-panel {
    background-color: #ffffff;
    border: 1px solid #dcdee4;
    border-radius: 8px;
    padding: 10px;
    width: 160px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow-y: auto;
}

.partitem-list-item {
    background-color: #dcdcdc;
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .partitem-list-item:hover {
        background-color: #cfcfcf;
    }

    .partitem-list-item.partitem-list-item-selected {
        background-color: #b9d9d6;
    }

.partitem-form {
    flex: 1;
    padding-top: 2px;
}

.partitem-field {
    margin-bottom: 16px;
    max-width: 700px;
}

    .partitem-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 6px;
    }

.partitem-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #c9ccd4;
    background: transparent;
    font-size: 13px;
    padding: 6px 2px;
    color: #111827;
    box-sizing: border-box;
}

    .partitem-input:focus {
        outline: none;
        border-bottom-color: #17a2a0;
    }

.partitem-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    max-width: 700px;
}

@media (max-width: 900px) {
    .partitem-box-body {
        flex-direction: column;
    }

    .partitem-list-panel {
        width: 100%;
    }
}


.partitem-searchselect {
    position: relative;
    width: 150px;
    flex-shrink: 0;
}

.partitem-searchselect-input {
    width: 100%;
    box-sizing: border-box;
}

.partitem-searchselect-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.10);
}

    .partitem-searchselect-list.show {
        display: block;
    }

.partitem-searchselect-item {
    padding: 8px 12px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
}

    .partitem-searchselect-item:hover,
    .partitem-searchselect-item.active {
        background-color: #eafaf9;
    }

.partitem-searchselect-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: #9aa0ab;
    font-style: italic;
}

/* ---------------- Assembles row actions ---------------- */
.dpgsetup-row-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.dpgsetup-edit-icon,
.dpgsetup-view-icon,
.dpgsetup-delete-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.15s ease;
}

    .dpgsetup-edit-icon:hover,
    .dpgsetup-view-icon:hover {
        background-color: #eafaf9;
    }

.dpgsetup-delete-row-icon {
    color: #e0524b;
}

    .dpgsetup-delete-row-icon:hover {
        background-color: #fdeceb;
    }

/* ---------------- Assembles modal ---------------- */
.dpgsetup-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

    .dpgsetup-modal-overlay.show {
        display: flex;
    }

.dpgsetup-modal {
    background-color: #ffffff;
    border-radius: 10px;
    width: 520px;
    max-width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
}

.dpgsetup-modal-header {
    background-color: #dcdcdc;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    border-radius: 10px 10px 0 0;
}

.dpgsetup-modal-content {
    padding: 20px;
}

.dpgsetup-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.dpgsetup-modal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
}

    .dpgsetup-modal-table th {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        color: #4b5568;
        padding: 8px 6px;
        border-bottom: 2px solid #dde3ec;
    }

    .dpgsetup-modal-table td {
        text-align: center;
        font-size: 12.5px;
        font-weight: 600;
        color: #111827;
        padding: 8px 6px;
        border-bottom: 1px solid #edf0f5;
    }

.dpgsetup-modal-add-btn {
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    background-color: #17a2a0;
    cursor: pointer;
}

    .dpgsetup-modal-add-btn:hover {
        background-color: #128a88;
    }

.dpgsetup-modal-textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid #c9ccd4;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

    .dpgsetup-modal-textarea:focus {
        outline: none;
        border-color: #17a2a0;
        box-shadow: 0 0 0 2px rgba(23, 162, 160, 0.15);
    }

.dpgsetup-modal-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.dpgsetup-modal-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f5;
    font-size: 13px;
}

    .dpgsetup-modal-detail-row .label {
        font-weight: 600;
        color: #4b5568;
    }

    .dpgsetup-modal-detail-row .value {
        font-weight: 700;
        color: #111827;
    }
/* Spare parts style */
.sale-left-panel {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.spareparts-dd {
    margin-left: 0; 
    width: 12%; 
}

.spartparts-ddtxtbx {
    border: none; 
    border-bottom: 1px solid #333; 
    border-radius: 0; 
    background-color: transparent; 
    padding: 6px 4px;
    font-size: 14px;
    box-shadow: none;
}

.spparts-ddtxtbx:focus,
.spartparts-dd:focus {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}
.spartparts-form .form-control:focus {
    border-color: black; 
    background-color: transparent; 
    box-shadow: none;
    outline: none; 
}
.spartparts-box {
    background-color: #fff; /* white background */
    border-radius: 10px; /* rounded corners */
}

/* sale spare parts page style */
/* Page */
.spare-sale-page {
    background: #f5f5f5;
}

/* Search */
.sale-search {
    position: relative;
    margin-bottom: 20px;
}

    .sale-search i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
    }

.sale-search-input {
    padding-left: 40px;
    border-radius: 10px;
}

/* Labels */
.sale-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Form Groups */
.sale-form-group {
    margin-bottom: 22px;
}

/* Inputs */
.sale-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #777;
    background: transparent;
    padding: 6px 0;
    outline: none;
}

/* Add Button */
.sale-add-btn {
    background: #1d9b9b;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 8px 25px;
}

    .sale-add-btn:hover {
        background: #168787;
    }

/* Cart Panel */
.sale-cart-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 12px rgba(0,0,0,.08);
}

/* Cart Item */
.sale-cart-item {
    display: flex;
    align-items: center;
    width:100%;
    gap: 15px;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.08);
}

/* Product Image */
.sale-cart-image {
    width: 55px;
    height: 55px;
    background: #d9d9d9;
    border-radius: 10px;
}

/* Info */

.sale-cart-info {
    flex: 1;
}

    .sale-cart-info h6 {
        margin: 0;
        font-weight: 700;
    }

    .sale-cart-info small {
        color: #666;
    }


.sale-cart-delete {
    border: none;
    background: none;
    color: #888;
}

.sale-cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sale-invoice-btn {
    background: #2f3440;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
}

    .sale-invoice-btn:hover {
        background: #1f2530;
    }

.sale-search {
    position: relative;
}

.sale-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    margin-top:5px;
}

.sale-search-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

    .sale-search-item:hover {
        background: #f5f5f5;
    }
/* Responsive */
@media(max-width:991px) {

    .sale-cart-card {
        min-height: auto;
    }

    .sale-cart-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/*End sale spare parts page style */

#customerSearchResult {
    position: absolute;
    margin-top:5px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    z-index: 99999;
    display: none;
    max-height: 250px;
    overflow-y: auto;
}

.customer-item {
    padding: 10px;
    cursor: pointer;
}

    .customer-item:hover {
        background: #f5f5f5;
    }


    /*Defective items*/
.Defectivesale-search {
    position: relative;
   
}

    .Defectivesale-search i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
    }

.Defectivesale-search-input {
    padding-left: 40px;
    border-radius: 10px;
}
.add-btn {
    height: 40px;
    background: #1ba39c;
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
}

.table-card {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 0 8px rgba(0,0,0,.05);
}

.table-header {
    border-bottom: 1px solid #dcdcdc;
}

.edit-icon {
    color: #333;
    cursor: pointer;
}

.delete-icon {
    color: #dc3545;
    cursor: pointer;
}

@media (max-width: 768px) {

    .add-btn {
        width: 100%;
    }

    .table-card {
        overflow-x: auto;
    }
}
.modal-header {
    background: #e9e9e9;
}

.modal-title {
    color: #343a40;
}

.form-control:focus,
textarea:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

.btn-success {
    background: #16979a;
    border: none;
}

.btn-secondary {
    background: #16979a;
    border: none;
}

.defective-table-card {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
}

.defective-table {
    width: 100%;
}

    .defective-table thead tr {
        background-color: #eeeeee;
    }

    .defective-table th {
        border: none;
        padding: .5rem .5rem;
        font-size: 14px;
        font-weight: 600;
        color: #000;
    }

    .defective-table td {
        padding: .5rem .5rem;
        vertical-align: middle;
        border-top: 1px solid #d9d9d9;
        font-size: 14px;
        font-weight: 500;
    }

    .defective-table tbody tr {
        background-color: #f7f7f7;
    }

        .defective-table tbody tr:hover {
            background-color: #f1f1f1;
        }

/*
.btn-outline-primary,
.btn-outline-danger {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
}

*/

    .btn-outline-primary i,
    .btn-outline-danger i {
        font-size: 13px;
    }
.defective-table thead tr {
    background-color: #ededed;
}

.defective-table tbody tr:nth-child(odd) td {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.defective-table tbody tr:nth-child(even) td {
    background-color: #fff !important;
}
/*End of defective items*/


/* ---------------- Ship Spareparts row actions (edit/delete icons) ---------------- */
.dpgsetup-shipsparepart-edit-icon,
.dpgsetup-shipsparepart-delete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.15s ease;
}

    .dpgsetup-shipsparepart-edit-icon:hover {
        background-color: #eafaf9;
    }

.dpgsetup-shipsparepart-delete-icon {
    color: #e0524b;
}

    .dpgsetup-shipsparepart-delete-icon:hover {
        background-color: #fdeceb;
    }

/* ---------------- Field width variants (use alongside .dpgsetup-underline-field) ---------------- */
/* max-width: none overrides the pre-existing 260px cap from
   .dpgsetup-vehicle-fields-row .dpgsetup-underline-field, which otherwise
   clips every field to the same width regardless of flex-grow below. */

.dpgsetup-underline-field.dpgsetup-field-xs {
    flex: 2 1 140px;
    min-width: 120px;
    max-width: none;
}

.dpgsetup-underline-field.dpgsetup-field-sm {
    flex: 1 1 200px;
    min-width: 160px;
    max-width: none;
}

.dpgsetup-underline-field.dpgsetup-field-md {
    flex: 3 1 260px;
    min-width: 200px;
    max-width: none;
}

.dpgsetup-underline-field.dpgsetup-field-lg {
    flex: 5 1 340px;
    min-width: 260px;
    max-width: none;
}

/* =========================================================
   Assembles: Running "Edit" popup
   ========================================================= */

/* ---------------- Running row Edit icon ---------------- */
.dpgsetup-running-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.15s ease;
}

    .dpgsetup-running-edit-icon:hover {
        background-color: #eafaf9;
    }

/* ---------------- Wide popup + second-level popup ---------------- */
.dpgsetup-modal.dpgsetup-modal-wide {
    width: 1200px;
    max-width: 96vw;
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
}

.dpgsetup-modal-overlay.dpgsetup-modal-overlay-2 {
    z-index: 1100;
}

.dpgsetup-modal-overlay-2 .dpgsetup-modal {
    width: 560px;
}

/* ---------------- Toolbar: Print / Defective / Missing / Complete ---------------- */
.dpgsetup-edit-toolbar {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.dpgsetup-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 93px;
    padding: 6px 14px;
    background-color: #f4f4f4;
    border: 1.5px solid #c4c6cc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .dpgsetup-outline-btn:hover {
        background-color: #eafaf9;
        border-color: #17a2a0;
    }

    .dpgsetup-outline-btn i {
        font-size: 15px;
    }

/* ---------------- 3-card layout ---------------- */
.dpgsetup-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 24px;
    align-items: stretch;
}

.dpgsetup-edit-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    min-height: 430px;
    box-sizing: border-box;
}

.dpgsetup-edit-card-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* ---------------- Assemble Progress ring ---------------- */
.dpgsetup-progress-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.dpgsetup-progress-ring {
    width: 152px;
    height: 152px;
}

.dpgsetup-progress-status {
    margin-top: 32px;
    text-align: center;
}

.dpgsetup-progress-status-label {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.dpgsetup-progress-status-value {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 400;
    color: #4b5563;
}

/* ---------------- Added / Pending parts tables ---------------- */
.dpgsetup-parts-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 18px;
}

    .dpgsetup-parts-table th {
        background-color: #f4f4f4;
        border-top: 2px solid #c4c4c4;
        border-bottom: 2px solid #c4c4c4;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        padding: 9px 8px;
    }

    .dpgsetup-parts-table td {
        border-bottom: 2px solid #c8c8c8;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        height: 44px;
        padding: 0 8px;
    }

.dpgsetup-parts-table-added th:nth-child(1) {
    width: 34%;
}

.dpgsetup-parts-table-added th:nth-child(2) {
    width: 40%;
}

.dpgsetup-parts-table-added th:nth-child(3) {
    width: 26%;
}

.dpgsetup-parts-table-pending th:nth-child(1) {
    width: 28%;
}

.dpgsetup-parts-table-pending th:nth-child(2) {
    width: 34%;
}

.dpgsetup-parts-table-pending th:nth-child(3) {
    width: 20%;
}

.dpgsetup-parts-table-pending th:nth-child(4) {
    width: 18%;
}

.dpgsetup-parts-add-icon {
    font-size: 20px;
    color: #111827;
    cursor: pointer;
}

/* ---------------- Defective / Missing popup: inline label + shared underline ---------------- */
.dpgsetup-inline-field {
    display: flex;
    align-items: baseline;
    gap: 6px;
    border-bottom: 1px solid #111827;
    padding-bottom: 3px;
    margin-bottom: 18px;
}

    .dpgsetup-inline-field label {
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
    }

    .dpgsetup-inline-field input[type="text"],
    .dpgsetup-inline-field input[type="number"] {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        font-size: 13px;
        color: #111827;
        padding: 0;
    }

        .dpgsetup-inline-field input[type="text"]:focus,
        .dpgsetup-inline-field input[type="number"]:focus {
            outline: none;
        }

    .dpgsetup-inline-field:focus-within {
        border-bottom-color: #17a2a0;
    }

.dpgsetup-inline-row {
    display: flex;
    align-items: flex-end;
    gap: 50px;
}

    .dpgsetup-inline-row .dpgsetup-inline-main {
        flex: 1 1 0;
    }

    .dpgsetup-inline-row .dpgsetup-inline-side {
        flex: 0 0 150px;
    }

.dpgsetup-inline-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 18px;
}

.dpgsetup-inline-row.dpgsetup-inline-row-last {
    gap: 24px;
    margin-top: 6px;
}

.dpgsetup-inline-row-last .dpgsetup-inline-field,
.dpgsetup-inline-row-last .dpgsetup-inline-row-actions {
    margin-bottom: 0;
}

.dpgsetup-inline-reason {
    margin-bottom: 30px;
}

.dpgsetup-radio-row.dpgsetup-modal-radio-row {
    gap: 80px;
    margin: 4px 0 30px;
}

@media (max-width: 1000px) {
    .dpgsetup-edit-grid {
        grid-template-columns: 1fr;
    }
}


.dpgsetup-progress-count {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8b8e95;
}
.partitem-field-error {
    display: none;
    color: #dc2626;
    font-size: 11px;
    margin-top: 4px;
}

    .partitem-field-error.show {
        display: block;
    }

.partitem-input.partitem-input-invalid {
    border-bottom-color: #dc2626;
}

.partitem-select.partitem-input-invalid,
.partitem-searchselect-input.partitem-input-invalid {
    border-color: #dc2626;
}


.catpart-input.catpart-input-invalid {
    border-bottom-color: #dc2626;
}


/* ---------------- "Select from Pending Assembles" popup - needs more room than the default modal ---------------- */
.dpgsetup-modal.dpgsetup-modal-md {
    width: 860px;
    max-width: 95vw;
}

.dpgsetup-modal-table th,
.dpgsetup-modal-table td {
    white-space: nowrap;
}

.dpgsetup-modal-add-btn {
    white-space: nowrap;
}

.dpgsetup-edit-toolbar {
    margin-top: 12px;
}

.dpgsetup-partsearch {
    width: 100%;
}

.dpgsetup-qty-short {
    color: #dc2626;
    font-weight: 700;
}

.dpgsetup-qty-main {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.dpgsetup-qty-main-short {
    color: #dc2626;
}

.dpgsetup-qty-cell {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    align-items: center;
    column-gap: 4px;
    min-height: 28px;
}

    /* empty left slot keeps the text centred while the "+" takes the right slot */
    .dpgsetup-qty-cell::before {
        content: "";
    }

.dpgsetup-qty-text {
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.dpgsetup-parts-add-icon {
    position: static !important;
    transform: none !important;
    justify-self: end;
    font-size: 18px;
}


/* =========================================================
   Shortages page
   ========================================================= */
.dpgsetup-shortage-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dpgsetup-shortage-stat {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 14px 22px;
    min-width: 170px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.dpgsetup-shortage-stat-number {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.dpgsetup-shortage-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 4px;
}

.dpgsetup-shortage-filters {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

    .dpgsetup-shortage-filters .dpgsetup-select {
        width: 160px;
    }

.dpgsetup-shortage-search {
    width: 240px;
}

td.dpgsetup-shortage-short,
.dpgsetup-modal-detail-row .value.dpgsetup-shortage-short {
    color: #dc2626;
    font-weight: 700;
}

.dpgsetup-underline-select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #111827;
    background: transparent;
    font-size: 13px;
    padding: 6px 2px;
    color: #111827;
    box-sizing: border-box;
}

    .dpgsetup-underline-select:focus {
        outline: none;
        border-bottom-color: #17a2a0;
    }

    .dpgsetup-underline-select.dpgsetup-input-invalid {
        border-bottom-color: #dc2626 !important;
    }

.dpgsetup-restock-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    min-height: 14px;
}

/*Imprt Excel pop up UI*/

.dpgsetup-import-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

    .dpgsetup-import-overlay.show {
        display: flex;
    }

.dpgsetup-import-dialog {
    background: #fff;
    width: 760px;
    max-width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 24px 28px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.dpgsetup-import-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dpgsetup-import-close {
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

    .dpgsetup-import-close:hover {
        color: #111;
    }

.dpgsetup-import-stepper {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    counter-reset: importstep;
}

    .dpgsetup-import-stepper li {
        flex: 1;
        counter-increment: importstep;
        padding-bottom: 8px;
        border-bottom: 3px solid #e5e7eb;
        font-size: 13px;
        color: #9ca3af;
    }

        .dpgsetup-import-stepper li::before {
            content: counter(importstep) ". ";
        }

        .dpgsetup-import-stepper li.active {
            border-bottom-color: #1f2937;
            color: #1f2937;
            font-weight: 600;
        }

        .dpgsetup-import-stepper li.done {
            border-bottom-color: #1f2937;
            color: #6b7280;
        }

.dpgsetup-import-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dpgsetup-import-scroll {
    overflow: auto;
    max-height: 50vh;
}

.dpgsetup-import-upload {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 0;
}

    .dpgsetup-import-upload label {
        font-size: 13px;
        color: #6b7280;
    }

.dpgsetup-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}