@media (min-width: 0px) and (max-width: 576.98px) {
    .navbar-brand {
        font-size: 17px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .navbar-brand {
        font-size: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-brand {
        font-size: 22px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand {
        font-size: 22px !important;
    }
}

@media (min-width: 1200px) {
    .navbar-brand {
        font-size: 22px !important;
    }

    .header-link {
        width: 500px !important;
    }
}
html {
    font-size: 14px
}

@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 .1rem white,0 0 0 .25rem #258cfb
}

html {
    position: relative;
    min-height: 100%
}

body {
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif
}

.Gradient-bg {
    background: #3c79be;
    background: linear-gradient(66deg,rgb(60 121 190) 0%,rgb(9 93 164) 45%,rgb(74 183 236) 100%)
}

#Master-Logo {
    content: url(~/images/manifestlogo.png)
}

.filter-white {
    filter: brightness(0) saturate(100%) invert(100%) sepia(64%) saturate(2%) hue-rotate(252deg) brightness(111%) contrast(100%)
}

.pl-1, .px-1 {
    padding-left: .25rem !important
}

.pr-1, .px-1 {
    padding-right: .25rem !important
}

.responsive-container {
    width: 100%;
    overflow-x: auto
}

.pt-3, .py-3 {
    padding-top: 1rem !important
}

/* .footer rule removed — footer is handled by .main-footer in theme.css */

.dx-gridbase-a11y-status-container {
    display: none
}

.custom-tooltip .tooltip-inner {
    max-width: 500px;
    background-color: #17a2b8;
    color: white;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 8px;
}
.information {
    font-weight: bold;
    font-style: italic;
}
/*
** Login
*/
#login-image {
    content: url(../Images/ManifestLogo.png);
}

.login-right {
    background-color: #f8f9fa;
}

/*
** Change Password
*/

.change-password {
    background-color: #f8f9fa;
}

/*
** Register
*/
#register-image {
    content: url(../Images/ManifestLogo.png);
}

.register-right {
    background-color: #f8f9fa;
}


/*
** Forgotten Password
*/
.forgot-password {
    background-color: #f8f9fa;
}

/*
** Reset Password
*/
.reset-password {
    background-color: #f8f9fa;
}

/*
** Account
*/
.account-form {
    border: 1px solid #f48024 !important;
    margin: 5px;
}
/* Light dropdown that fits dark navbar */
.custom-dropdown {
    background-color: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 0; /* Remove top/bottom extra space that causes gaps */
    overflow: hidden; /* Ensures hover backgrounds fill completely */
    min-width: 180px;
}

    /* Dropdown items */
    .custom-dropdown .dropdown-item {
        color: #212529;
        padding: 0.65rem 1rem;
        font-weight: 500;
        line-height: 1.3; /* reduce gap above/below text */
        transition: all 0.15s ease;
        border-radius: 0; /* ensures background fills full width */
    }

        /* Hover & focus � full coverage */
        .custom-dropdown .dropdown-item:hover,
        .custom-dropdown .dropdown-item:focus {
            background-color: #e9ecef;
            color: #0d6efd;
        }

    /* Divider line styling */
    .custom-dropdown .dropdown-divider {
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

/* Optional: show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}
.dx-data-row:hover td {
    background-color: #f8f9fc;
}
.step-card.highlight {
    border: 2px solid #0d6efd; /* Bootstrap primary color */
    background-color: #e7f1ff; /* light blue */
    transition: background-color 0.2s, border 0.2s;
}
.message-content {
    max-height: 250px; /* controls popup body height */
    overflow-y: auto; /* scrollbar if message is long */
    word-wrap: break-word;
    white-space: normal;
}
#workflowTable {
    table-layout: fixed;
    width: 100%;
}

#workflowTable th,
#workflowTable td {
word-wrap: break-word;
word-break: break-word;
white-space: normal;
overflow-wrap: break-word;
vertical-align: top;
}

#workflowTable td:nth-child(2) { /* Description column */
width: 30%; /* Adjust as needed */
}

/* Row container */
.step-row {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* spacing between columns */
}

/* Percentage-based columns */
.col-left {
    flex: 0 0 40%;
    min-width: 0;
}
/* connector text */
.col-meta {
    flex: 0 0 13%;
    min-width: 0;
}
/* GLOBAL/LOCAL label */
.col-buttons {
    flex: 0 0 35%;
}
/* button cluster */
.col-check {
    flex: 0 0 10%;
}
/* checkbox */

/* Truncate text with ellipsis */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* critical for flex/grid truncation */
}

/* Keep buttons tidy inside their fixed column */
.col-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end; /* align to the right within its column */
}

/* Optional: Responsive tweak */
@media (max-width: 768px) {
    .col-left {
        flex-basis: 55%;
    }

    .col-meta {
        flex-basis: 15%;
    }

    .col-buttons {
        flex-basis: 20%;
    }

    .col-check {
        flex-basis: 10%;
    }
}

.dx-freespace-row {
    display: none !important;
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.filter-card {
    border: 1px solid #e3e6ea;
}

.table th {
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.table td {
    font-size: 0.9rem;
}

.badge-soft-success {
    background-color: #e6f4ea;
    color: #137333;
}

.badge-soft-warning {
    background-color: #fff4e5;
    color: #b76e00;
}

.badge-soft-danger {
    background-color: #fdecea;
    color: #a50e0e;
}
/* ===== Dashboard polish ===== */

.page-title {
    font-size: 1.4rem;
    font-weight: 600;
}

.filter-card {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* KPI cards */
.kpi-card {
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    height: 100%;
}

.kpi-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.kpi-value {
    font-size: 1.9rem;
    font-weight: 600;
    margin-top: 4px;
}

/* Accent colors */
.kpi-blue {
    border-left: 4px solid #0d6efd;
}

.kpi-green {
    border-left: 4px solid #198754;
}

.kpi-orange {
    border-left: 4px solid #fd7e14;
}

.kpi-purple {
    border-left: 4px solid #6f42c1;
}

/* Grid container */
#gridContainer {
    border-radius: 8px;
}

/* DevExtreme grid subtle polish */
.dx-datagrid {
    font-size: 0.85rem;
}

.dx-datagrid-headers {
    background-color: #f8f9fa;
    font-weight: 600;
}