#template-customizer{
    display: none!important;
}

/* Keep the icon font explicit after utility styles and avoid message date overlap. */
.ti, .ti::before { font-family: "tabler-icons" !important; }
@media (min-width: 992px) {
    body.message-list-page .pending-message-table tbody tr { min-height: 140px !important; }
    body.message-list-page .message-col-person > .flex { align-items: flex-start !important; }
    body.message-list-page .message-col-person .text-xs { display: block; margin: 5px 0 30px !important; line-height: 1.35; }
    body.message-list-page .message-col-last-action { line-height: 1.3; }
}

/* Keep the shared message filters on one clean row on desktop. */
@media (min-width: 1200px) {
    .ociu-filter-form {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: end !important;
        width: 100%;
    }
    .ociu-filter-form .ociu-filter-field { min-width: 0; }
    .ociu-filter-form .ociu-filter-search-field { flex: 1 1 230px; }
    .ociu-filter-form .ociu-filter-actions { flex: 0 0 auto; white-space: nowrap; }
    .ociu-filter-clear-btn { display: inline-flex !important; align-items: center; text-decoration: none; }
}

/* Login page */
html.customizer-hide body {
    min-height: 100vh;
    background: #f5f6f8;
}

html.customizer-hide .container-xxl {
    max-width: none;
    padding: 0;
}

html.customizer-hide .authentication-wrapper.authentication-basic {
    min-height: 100vh;
    align-items: flex-start;
    padding: 56px 20px !important;
}

html.customizer-hide .authentication-inner {
    width: 448px;
    max-width: 100%;
    margin-top: 56px;
    padding: 0 !important;
}

html.customizer-hide .authentication-wrapper.authentication-basic .authentication-inner::before,
html.customizer-hide .authentication-wrapper.authentication-basic .authentication-inner::after {
    display: none;
    content: none;
}

html.customizer-hide .authentication-inner .card {
    border: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 18px rgba(27, 35, 48, 0.13);
}

html.customizer-hide .authentication-inner .card-body {
    padding: 36px 32px 32px;
}

html.customizer-hide .authentication-inner .app-brand {
    margin-bottom: 12px !important;
}

html.customizer-hide .authentication-inner .app-brand img {
    width: auto;
    height: 155px !important;
    border-radius: 0;
    object-fit: contain;
}

html.customizer-hide .authentication-inner h4 {
    margin-bottom: 8px !important;
    color: #101828;
    font-size: 29px;
    line-height: 1.2;
}

html.customizer-hide .authentication-inner h4 + p {
    margin-bottom: 32px !important;
    color: #101828;
    font-size: 15px;
}

html.customizer-hide .authentication-inner center > .mb-4:empty {
    display: none;
}

html.customizer-hide #formAuthentication {
    margin-bottom: 0 !important;
}

html.customizer-hide #formAuthentication > .mb-6 {
    position: relative;
    margin-bottom: 24px !important;
}

html.customizer-hide #formAuthentication > .mb-6:last-child {
    margin-bottom: 0 !important;
}

html.customizer-hide #formAuthentication .form-label {
    position: absolute;
    top: -9px;
    left: 15px;
    z-index: 6;
    margin: 0;
    padding: 0 5px;
    color: #596276;
    background: #fff;
    font-size: 14px;
    line-height: 18px;
}

html.customizer-hide #formAuthentication .form-control {
    height: 58px;
    padding: 0 20px;
    border: 1px solid #cbd2dc;
    border-radius: 9px;
    color: #101828;
    background-color: #eaf2ff;
    font-size: 15px;
    box-shadow: none;
}

html.customizer-hide #formAuthentication select.form-control {
    background-color: #fff;
}

html.customizer-hide #formAuthentication .form-control:focus {
    border-color: #2f64df;
    box-shadow: 0 0 0 2px rgba(47, 100, 223, 0.12);
}

html.customizer-hide #formAuthentication .form-control:-webkit-autofill,
html.customizer-hide #formAuthentication .form-control:-webkit-autofill:hover,
html.customizer-hide #formAuthentication .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #101828;
    box-shadow: 0 0 0 1000px #eaf2ff inset;
    transition: background-color 9999s ease-out 0s;
}

html.customizer-hide #formAuthentication .input-group {
    border-radius: 9px;
}

html.customizer-hide #formAuthentication .input-group .form-control {
    border-right: 1px solid #cbd2dc;
    border-radius: 9px;
}

html.customizer-hide #formAuthentication .input-group-text {
    display: none;
}

html.customizer-hide #formAuthentication .my-8 {
    margin: 0 0 24px !important;
}

html.customizer-hide #formAuthentication .my-8 .d-flex {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
}

html.customizer-hide #formAuthentication .my-8 a {
    color: #165dff;
    font-size: 14px;
    white-space: nowrap;
}

html.customizer-hide #formAuthentication .remember-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #101828;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    justify-self: start;
}

html.customizer-hide #formAuthentication .my-8 a {
    margin: 0;
    justify-self: end;
}

html.customizer-hide #formAuthentication .remember-control input {
    appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #8b929e;
    border-radius: 2px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}

html.customizer-hide #formAuthentication .remember-control input:checked {
    border-color: #2d5be3;
    background-color: #2d5be3;
    background-image: var(--bs-form-check-bg-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

html.customizer-hide #formAuthentication .remember-control label {
    margin: 0;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

html.customizer-hide #formAuthentication .btn-primary {
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #4185f4 0%, #2854dc 100%);
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
}

html.customizer-hide #formAuthentication .btn-primary:hover,
html.customizer-hide #formAuthentication .btn-primary:focus {
    background: linear-gradient(90deg, #3478e9 0%, #2148c7 100%);
}

html.customizer-hide .authentication-inner .text-center {
    display: none;
}

html.customizer-hide .authentication-inner .alert {
    margin: 0 0 24px;
    text-align: left;
}

/* OCIU split-screen login presentation. Authentication markup and behavior stay intact. */
html.customizer-hide,
html.customizer-hide body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
}

html.customizer-hide body {
    overflow-x: hidden;
    background: #eef5ff url('../img/ociu/login-portal-background.png') center / cover no-repeat fixed !important;
}

html.customizer-hide body > .container-xxl {
    min-height: 100vh;
}

html.customizer-hide .authentication-wrapper.authentication-basic {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 100vh;
    grid-template-columns: minmax(430px, 46%) minmax(520px, 54%);
    align-items: center;
    padding: 42px 5.2% !important;
}

.login-showcase {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(540px, 88%);
    min-height: calc(100vh - 84px);
    flex-direction: column;
    align-items: center;
    justify-self: center;
    color: #fff;
}

.login-showcase-brand {
    margin: auto 0;
    text-align: center;
}

.login-showcase-brand img {
    width: 164px;
    height: 164px;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
}

.login-showcase-brand h1 {
    margin: 5px 0 0;
    color: #fff;
    font-size: clamp(29px, 2.2vw, 39px);
    font-weight: 700;
    letter-spacing: -0.7px;
}

.login-showcase-brand .login-showcase-kicker {
    margin: 15px 0 0 !important;
    color: rgba(226, 235, 255, 0.9);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.login-showcase-brand p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
}

.login-showcase-features {
    display: grid;
    width: 390px;
    max-width: 82%;
    gap: 18px;
    margin-top: 30px;
}

.login-showcase-features > div {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 17px;
}

.login-showcase-features .ti {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #4296ff, #195cff);
    font-size: 29px;
    box-shadow: 0 10px 22px rgba(16, 58, 166, 0.28);
}

.login-showcase-features > div:nth-child(2) .ti { background: linear-gradient(145deg, #38d98b, #08a961); }
.login-showcase-features > div:nth-child(3) .ti { background: linear-gradient(145deg, #ffbd4a, #ff7b22); }
.login-showcase-features > div:nth-child(4) .ti { background: linear-gradient(145deg, #b45bff, #7137ed); }

.login-showcase-features span {
    display: flex;
    flex-direction: column;
}

.login-showcase-features strong {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.login-showcase-features small {
    margin-top: 3px;
    color: rgba(222, 231, 255, 0.82);
    font-size: 13px;
}

.login-showcase blockquote {
    align-self: flex-start;
    margin: auto 0 8px 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
}

.login-showcase blockquote::after {
    display: block;
    width: 38px;
    height: 3px;
    margin-top: 16px;
    border-radius: 2px;
    background: #35a7ff;
    content: '';
}

html.customizer-hide .authentication-inner {
    position: relative;
    z-index: 2;
    width: min(580px, 92%);
    max-width: 580px;
    margin: 0;
    justify-self: center;
}

html.customizer-hide .authentication-inner .card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 24px 60px rgba(35, 66, 120, 0.17);
    backdrop-filter: blur(14px);
}

html.customizer-hide .authentication-inner .card-body {
    position: relative;
    padding: 39px 43px 28px;
}

.login-language {
    position: absolute;
    top: 25px;
    right: 25px;
    display: inline-flex;
    height: 37px;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    color: #687895;
    background: #fff;
    font-size: 12px;
    box-shadow: 0 3px 10px rgba(31, 49, 80, 0.05);
}

html.customizer-hide .authentication-inner .app-brand {
    margin: 0 0 5px !important;
}

html.customizer-hide .authentication-inner .app-brand img {
    width: 148px;
    height: 148px !important;
    object-fit: contain;
}

html.customizer-hide .authentication-inner h4 {
    margin-bottom: 5px !important;
    color: #141d36;
    font-size: 34px;
}

html.customizer-hide .authentication-inner h4 + p {
    margin-bottom: 23px !important;
    color: #65728f;
    font-size: 14px;
}

html.customizer-hide .authentication-inner center > .mb-4 {
    margin-bottom: 17px !important;
}

html.customizer-hide .authentication-inner .alert {
    min-height: 48px;
    margin: 0 !important;
    padding: 13px 44px 13px 42px;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
}

html.customizer-hide #formAuthentication > .mb-6 {
    position: relative;
    margin-bottom: 17px !important;
}

html.customizer-hide #formAuthentication .form-label {
    position: static;
    display: block;
    margin: 0 0 5px;
    padding: 0;
    color: #263655;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}

html.customizer-hide #formAuthentication .form-label::after {
    margin-left: 3px;
    color: #ef4444;
    content: '*';
}

html.customizer-hide #formAuthentication .form-control,
html.customizer-hide #formAuthentication .input-group .form-control {
    height: 52px;
    padding: 0 45px 0 50px;
    border: 1px solid #cad5e5;
    border-radius: 8px;
    color: #1d2b48;
    background: #fbfcff;
    font-size: 13px;
}

html.customizer-hide #formAuthentication select.form-control {
    appearance: auto;
    background-color: #fff;
}

.login-field-icon {
    position: absolute;
    bottom: 16px;
    left: 17px;
    z-index: 5;
    color: #657696;
    font-size: 20px;
    pointer-events: none;
}

html.customizer-hide #formAuthentication .input-group-text {
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 8;
    display: flex;
    width: 45px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #4d6086;
    background: transparent;
}

html.customizer-hide #formAuthentication .my-8 {
    margin: 1px 0 18px !important;
}

html.customizer-hide #formAuthentication .btn-primary {
    display: flex !important;
    height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 9px;
    background: linear-gradient(100deg, #1e7bf1 0%, #3e38f5 100%);
    font-size: 16px;
    box-shadow: 0 11px 22px rgba(49, 80, 231, 0.2);
}

html.customizer-hide #formAuthentication .btn-primary .ti {
    font-size: 21px;
}

.login-authorization {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 17px;
    border-top: 1px solid #e3e8f0;
    color: #7786a3;
    font-size: 12px;
}

.login-authorization .ti {
    font-size: 19px;
}

@media (max-width: 1100px) {
    html.customizer-hide .authentication-wrapper.authentication-basic {
        grid-template-columns: minmax(330px, 42%) minmax(480px, 58%);
        padding-right: 2.5% !important;
        padding-left: 2.5% !important;
    }

    .login-showcase-brand h1 { font-size: 28px; }
    .login-showcase-features { width: 330px; }
}

@media (max-width: 820px) {
    html.customizer-hide body {
        background-position: 68% center !important;
    }

    html.customizer-hide .authentication-wrapper.authentication-basic {
        display: flex;
        padding: 28px 16px !important;
    }

    .login-showcase {
        display: none;
    }

    html.customizer-hide .authentication-inner {
        width: min(520px, 100%);
        margin: auto;
    }
}

@media (max-width: 575.98px) {
    html.customizer-hide .authentication-inner .card-body {
        padding: 72px 22px 24px;
    }

    html.customizer-hide .authentication-inner .app-brand img {
        width: 120px;
        height: 120px !important;
    }

    html.customizer-hide .authentication-inner h4 {
        font-size: 28px;
    }
}

@media (max-width: 575.98px) {
    html.customizer-hide .authentication-wrapper.authentication-basic {
        padding: 24px 16px !important;
    }

    html.customizer-hide .authentication-inner .card-body {
        padding: 28px 22px;
    }

    html.customizer-hide .authentication-inner {
        margin-top: 0;
    }

    html.customizer-hide .authentication-inner .app-brand img {
        height: 125px !important;
    }
}

/* Compact dashboard presentation and scalable station-details modal */
body:has(.dashboard-journey-card) .container-p-y:first-child {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body:has(.dashboard-journey-card) .ociu-filter-card {
    margin-bottom: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] {
    min-height: 112px !important;
    border-radius: 16px !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body {
    padding: 13px 18px !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-1 {
    margin-bottom: 4px !important;
    font-size: 14px !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-1::after {
    display: inline;
    margin-top: 0;
    margin-left: 5px;
    font-size: 10px;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body h4 {
    font-size: 24px !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .avatar {
    right: 18px !important;
    width: 60px !important;
    height: 60px !important;
    transform: translateY(-32%) !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .avatar-initial .ti,
body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .avatar-initial .ti::before {
    font-size: 52px !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-0 {
    left: 18px !important;
    bottom: 16px !important;
    height: 9px !important;
}

body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-0::before {
    top: 1px !important;
    height: 6px !important;
}

body:has(.dashboard-journey-card) .dashboard-journey-card > .card > .card-header {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 15px;
}

body:has(.dashboard-journey-card) .dashboard-journey-card > .card > .card-body {
    padding: 12px;
}

body:has(.dashboard-journey-card) .dashboard-approval-corner,
body:has(.dashboard-journey-card) .dashboard-approval-stage {
    min-height: 34px;
}

body:has(.dashboard-journey-card) .dashboard-approval-direction,
body:has(.dashboard-journey-card) .dashboard-approval-value {
    min-height: 48px;
}

.dashboard-approval-value .ti {
    display: inline-flex;
    width: 24px;
    height: 24px;
    right: -12px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e0ea;
    border-radius: 50%;
    color: #526174;
    background: #fff;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(31, 45, 70, 0.08);
}

.dashboard-approval-value.is-reverse .ti {
    left: -12px;
}

body.dashboard-modal-open {
    overflow: hidden;
}

.dashboard-journey-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(2px);
}

.dashboard-journey-modal[hidden] {
    display: none;
}

.dashboard-journey-modal-panel {
    display: flex;
    width: min(560px, 100%);
    max-height: min(680px, calc(100vh - 40px));
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
}

.dashboard-journey-modal-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e9f0;
}

.dashboard-journey-modal-header h3 {
    margin: 0;
    color: #202939;
    font-size: 17px;
    font-weight: 700;
}

.dashboard-journey-modal-header p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 11px;
}

.dashboard-journey-modal-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d9e0ea;
    border-radius: 50%;
    color: #667085;
    background: #fff;
    font-size: 19px;
}

.dashboard-journey-modal-close:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff1f2;
}

.dashboard-journey-modal-body {
    min-height: 0;
    padding: 12px 18px 16px;
}

.dashboard-journey-modal-table-head,
.dashboard-journey-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px;
    align-items: center;
}

.dashboard-journey-modal-table-head {
    padding: 8px 12px;
    border-radius: 7px;
    color: #667085;
    background: #f3f5f8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-journey-modal-table-head span:last-child {
    text-align: center;
}

.dashboard-journey-modal-stations {
    max-height: min(480px, calc(100vh - 190px));
    overflow-y: auto;
}

.dashboard-journey-modal-row {
    min-height: 47px;
    padding: 7px 12px;
    border-bottom: 1px solid #edf0f4;
    color: #344054;
    font-size: 13px;
}

.dashboard-journey-modal-row > span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-journey-modal-row .ti {
    color: #70809a;
    font-size: 17px;
}

.dashboard-journey-modal-row strong {
    color: #2854dc;
    text-align: center;
}

body:has(.dashboard-journey-card) .dashboard-station-age-card .card-header {
    padding: 10px 16px 8px;
}

body:has(.dashboard-journey-card) .station-age-table th,
body:has(.dashboard-journey-card) .station-age-table td {
    padding-top: 7px;
    padding-bottom: 7px;
}

body:has(.dashboard-journey-card) .dashboard-station-age-card .table-responsive {
    max-height: 260px;
    overflow-y: auto;
}

/* Document preview page: viewport-height viewer and correctly anchored footer */
@media (min-width: 1200px) {
    body:has(#pdf-viewer) {
        overflow: hidden;
    }

    body:has(#pdf-viewer) .layout-wrapper,
    body:has(#pdf-viewer) .layout-container,
    body:has(#pdf-viewer) .layout-page {
        height: 100vh;
        min-height: 0;
    }

    body:has(#pdf-viewer) .layout-page,
    body:has(#pdf-viewer) .content-wrapper {
        overflow: hidden;
    }

    body:has(#pdf-viewer) .content-wrapper > .container-xxl {
        margin-top: -54px;
        padding-top: 24px !important;
        padding-bottom: 42px !important;
    }

    body:has(#pdf-viewer) .min-h-screen {
        min-height: 0;
    }

    body:has(#pdf-viewer) #pdf-viewer {
        height: clamp(400px, calc(100vh - 300px), 820px) !important;
        display: block;
    }

    body:has(#pdf-viewer) .layout-container > .content-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 255px;
        z-index: 5;
        width: auto;
        background: transparent !important;
    }

    body:has(#pdf-viewer) .layout-container > .content-footer .footer-container {
        justify-content: flex-start !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    html.layout-menu-collapsed body:has(#pdf-viewer) .layout-container > .content-footer {
        left: 70px;
    }
}

/* Shared navigation and message-list fidelity fixes. */
html:not(.customizer-hide) #layout-menu .menu-item:has(> .menu-sub > .menu-item.active) > .menu-link,
html:not(.customizer-hide) #layout-menu .menu-item.active:has(> .menu-sub) > .menu-link {
    color: #fff !important;
    background: rgba(103, 92, 230, 0.3) !important;
}

html:not(.customizer-hide) #layout-menu .menu-item:has(> .menu-sub > .menu-item.active) > .menu-link .menu-icon,
html:not(.customizer-hide) #layout-menu .menu-item.active:has(> .menu-sub) > .menu-link .menu-icon {
    color: #fff !important;
}

body:has(.dashboard-welcome-banner) .dashboard-station-age-card .station-age-table thead,
body:has(.dashboard-welcome-banner) .dashboard-station-age-card .station-age-table thead tr,
body:has(.dashboard-welcome-banner) .dashboard-station-age-card .station-age-table thead th {
    position: sticky;
    top: 0;
    z-index: 8 !important;
    opacity: 1 !important;
    background: #f4f7fb !important;
    background-color: #f4f7fb !important;
    box-shadow: inset 0 -1px 0 #dce4ef;
}

.message-list-page .content-wrapper > .container-xxl:first-child {
    max-width: none !important;
    padding: 14px 18px !important;
}

.message-list-page .message-list-card {
    padding: 10px !important;
    border: 1px solid #dce5f1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(31, 49, 80, 0.07) !important;
}

.message-list-titlebar {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 4px 10px;
}

.message-list-heading,
.message-list-heading > div,
.message-list-tools,
.message-list-tools button {
    display: flex;
    align-items: center;
}

.message-list-heading {
    gap: 10px;
}

.message-list-heading > .ti {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #7349ee, #9a4df1);
    font-size: 20px;
}

.message-list-heading > div {
    gap: 10px;
}

.message-list-heading strong {
    color: #17264a;
    font-size: 16px;
}

.message-list-heading span {
    padding: 4px 9px;
    border-radius: 12px;
    color: #5d6e8d;
    background: #eef3fb;
    font-size: 10px;
}

.message-list-tools {
    gap: 9px;
}

.message-list-tools button {
    height: 34px;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid #dce5f2;
    border-radius: 7px;
    color: #1655e6;
    background: #f7faff;
    font-size: 11px;
    font-weight: 600;
}

.message-list-page .pending-message-table {
    max-height: calc(100vh - 265px) !important;
    border: 1px solid #dce4ef !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    scrollbar-width: thin;
}

.message-list-page .pending-message-table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.message-list-page .pending-message-table::-webkit-scrollbar-thumb {
    border: 2px solid #f0f3f8;
}

.message-list-page .pending-message-table .message-col-individual {
    display: none !important;
}

@media (min-width: 992px) {
    .message-list-page .pending-message-table tr {
        display: grid !important;
        grid-template-columns: 42px minmax(245px, 1.25fr) minmax(190px, 1fr) minmax(145px, .8fr) minmax(135px, .8fr) 112px 92px !important;
    }

    .message-list-page .pending-message-table thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: #f3f6fb !important;
    }

    .message-list-page .pending-message-table thead tr {
        min-height: 48px !important;
        grid-template-rows: 48px !important;
        background: #f3f6fb !important;
    }

    .message-list-page .pending-message-table thead th {
        position: relative !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: 9px 12px !important;
        border: 0 !important;
        border-right: 1px solid #e1e7f0 !important;
        color: #243653 !important;
        background: #f3f6fb !important;
        font-size: 10px !important;
        text-transform: uppercase;
    }

    .message-list-page .pending-message-table tbody tr {
        min-height: 112px !important;
        grid-template-rows: repeat(4, minmax(25px, auto)) !important;
        border-bottom: 1px solid #e4e9f1;
        background: #fff;
    }

    .message-list-page .pending-message-table tbody td {
        display: flex !important;
        min-width: 0;
        align-items: center;
        padding: 7px 10px !important;
        border-right: 1px solid #e4e9f1 !important;
        border-bottom: 0 !important;
        white-space: normal !important;
    }

    .message-list-page .pending-message-table .message-col-sn { grid-column: 1 !important; grid-row: 1 / span 4 !important; justify-content: center !important; }
    .message-list-page .pending-message-table .message-col-person { grid-column: 2 !important; grid-row: 1 / span 4 !important; }
    .message-list-page .pending-message-table .message-col-overall { grid-column: 3 !important; grid-row: 1 !important; }
    .message-list-page .pending-message-table .message-col-pending { grid-column: 3 !important; grid-row: 2 !important; }
    .message-list-page .pending-message-table .message-col-from { grid-column: 3 !important; grid-row: 3 !important; }
    .message-list-page .pending-message-table .message-col-direction { grid-column: 3 !important; grid-row: 4 !important; }
    .message-list-page .pending-message-table .message-col-station { grid-column: 4 !important; grid-row: 1 / span 4 !important; }
    .message-list-page .pending-message-table .message-col-last-action { grid-column: 2 !important; grid-row: 4 !important; z-index: 2; align-self: end; padding: 0 10px 8px 86px !important; font-size: 10px !important; }
    .message-list-page .pending-message-table .message-col-history { grid-column: 5 !important; grid-row: 1 / span 4 !important; }
    .message-list-page .pending-message-table .message-col-document { grid-column: 6 !important; grid-row: 1 / span 4 !important; position: relative; justify-content: center !important; }
    .message-list-page .pending-message-table .message-col-action { grid-column: 7 !important; grid-row: 1 / span 4 !important; justify-content: center !important; }

    .message-list-page .pending-message-table thead .message-col-last-action,
    .message-list-page .pending-message-table thead .message-col-pending,
    .message-list-page .pending-message-table thead .message-col-from,
    .message-list-page .pending-message-table thead .message-col-direction,
    .message-list-page .pending-message-table thead .message-col-document:nth-of-type(n+2) {
        display: none !important;
    }

    .message-list-page .pending-message-table thead .message-col-person { padding-left: 70px !important; }
    .message-list-page .pending-message-table thead .message-col-document { font-size: 0 !important; }
    .message-list-page .pending-message-table thead .message-col-document::after { content: "Documents"; font-size: 10px; }

    .message-list-page .pending-message-table tbody .message-col-overall::before { content: "Overall Status:"; }
    .message-list-page .pending-message-table tbody .message-col-pending::before { content: "Pending at:"; }
    .message-list-page .pending-message-table tbody .message-col-from::before { content: "From:"; }
    .message-list-page .pending-message-table tbody .message-col-direction::before { content: "Direction:"; }

    .message-list-page .pending-message-table tbody .message-col-overall::before,
    .message-list-page .pending-message-table tbody .message-col-pending::before,
    .message-list-page .pending-message-table tbody .message-col-from::before,
    .message-list-page .pending-message-table tbody .message-col-direction::before {
        flex: 0 0 84px;
        color: #63718b;
        font-size: 10px;
        font-weight: 600;
    }

    .message-list-page .pending-message-table tbody .message-col-document > div {
        position: static !important;
        transform: none !important;
    }

    .message-list-page .pending-message-table tbody .message-col-document + .message-col-document > div {
        margin-top: 48px !important;
    }
}

.message-list-page .card-body > nav {
    min-height: 48px;
    padding: 8px 4px 0;
}

.message-list-page .total-records {
    color: #52627f;
    font-size: 11px;
}

/* Exact dashboard reference refinements */
html:not(.customizer-hide) .layout-menu .app-brand {
    height: 68px;
    padding: 0 32px;
    align-items: center;
}

html:not(.customizer-hide) .layout-menu .app-brand-link {
    flex-direction: row;
    gap: 0;
}

html:not(.customizer-hide) .layout-menu .app-brand-link > img {
    display: none;
}

html:not(.customizer-hide) .layout-menu .app-brand-text {
    inline-size: auto;
    white-space: nowrap;
    font-size: 19px;
}

html:not(.customizer-hide) .layout-menu .sidebar-profile {
    display: flex;
    height: 142px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

html:not(.customizer-hide) .layout-menu .sidebar-profile img {
    width: 84px;
    height: 84px;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(20, 45, 93, 0.14));
}

html:not(.customizer-hide) .layout-menu .sidebar-profile strong {
    color: #111827;
    font-size: 18px;
}

html:not(.customizer-hide) .layout-menu .menu-inner {
    padding: 6px 14px 20px !important;
}

html:not(.customizer-hide) .layout-menu .menu-item.active > .menu-link {
    color: #173c9d;
    background: transparent;
    box-shadow: none;
}

html:not(.customizer-hide) .layout-menu .menu-item.active > .menu-link .menu-icon {
    color: #173c9d;
}

html:not(.customizer-hide) .layout-menu .menu-sub {
    padding: 2px 0 2px 16px;
}

html:not(.customizer-hide) .layout-menu .menu-sub .menu-link {
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 14px;
}

html:not(.customizer-hide) .layout-menu .menu-sub .menu-icon {
    width: 18px;
    margin-right: 8px;
    font-size: 16px;
}

html:not(.customizer-hide) #layout-navbar .navbar-nav {
    gap: 8px;
}

html:not(.customizer-hide) #layout-navbar .app-header-action {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

html:not(.customizer-hide) #layout-navbar .app-header-action:hover {
    background: rgba(255, 255, 255, 0.12);
}

html:not(.customizer-hide) #layout-navbar .app-header-action .ti {
    font-size: 25px;
}

html:not(.customizer-hide) #layout-navbar .dropdown-user {
    margin: 0 3px;
}

html:not(.customizer-hide) .content-wrapper:has(.card-border-shadow-primary) > .container-xxl:first-child::before {
    margin-bottom: 18px;
    content: "Dashboard  ›  Police Dashboard";
}

html:not(.customizer-hide) .card-border-shadow-primary,
html:not(.customizer-hide) .card-border-shadow-success,
html:not(.customizer-hide) .card-border-shadow-danger,
html:not(.customizer-hide) .card-border-shadow-info {
    min-height: 174px;
    border-radius: 28px;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-1 {
    margin-bottom: 9px !important;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-1::after {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    content: "(Till Date)";
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .d-flex {
    margin: 0 !important;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body h4 {
    font-size: 25px;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar {
    right: 22px;
    width: 88px;
    height: 88px;
    transform: translateY(-24%);
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial .ti {
    font-size: 72px !important;
    stroke-width: 1.4;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-0 {
    position: absolute;
    left: 22px;
    bottom: 34px;
    width: 55%;
    height: 14px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    color: transparent !important;
    font-size: 0;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-0 span,
html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-0 small {
    display: none;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-0::before {
    top: 3px;
    height: 9px;
}

html:not(.customizer-hide) .dashboard-flow-card {
    margin-top: 18px;
}

html:not(.customizer-hide) .dashboard-flow-card > .card {
    min-height: 418px;
    border: 1px solid #dbe1e8;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(28, 45, 76, 0.13);
}

html:not(.customizer-hide) .dashboard-flow-card .card-header {
    margin: 0 20px;
    padding: 13px 0 12px;
    border-bottom: 1px solid #d9dee7;
    color: #111827;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
}

html:not(.customizer-hide) .dashboard-flow-card .card-body {
    display: flex;
    flex-direction: column;
    padding: 38px 8.5% 22px;
}

html:not(.customizer-hide) .dashboard-flow-card .flow-chart-placeholder {
    flex: 1 1 auto;
    min-height: 245px;
    border: 2px dashed #e0e3e8;
}

html:not(.customizer-hide) .dashboard-flow-card .flow-chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
    font-size: 14px;
}

html:not(.customizer-hide) .dashboard-flow-card .flow-chart-legend span::before {
    margin-right: 4px;
    content: "⌁";
}

html:not(.customizer-hide) .dashboard-flow-card .pending {
    color: #8478ee;
}

html:not(.customizer-hide) .dashboard-flow-card .completed {
    color: #65bf87;
}

@media (max-width: 1199.98px) {
    html:not(.customizer-hide) .layout-menu .sidebar-profile {
        height: 120px;
    }
}

/* Dashboard presentation fixes: hero framing, status chart and sidebar account menu. */
body:has(.dashboard-welcome-banner) .dashboard-welcome-banner {
    background-size: cover !important;
    background-position: center top !important;
}

body:has(.dashboard-welcome-banner) .dashboard-status-card .card-body {
    justify-content: space-around;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut {
    position: relative;
    isolation: isolate;
    background: conic-gradient(
        #21bd70 0 33%,
        #ff8614 33% 67%,
        #bcd2f2 67% 100%
    ) !important;
    box-shadow: 0 8px 20px rgba(26, 58, 105, 0.1);
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut::before {
    position: absolute;
    z-index: -1;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 1px rgba(221, 229, 240, 0.55);
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut > div {
    inset: 50% auto auto 50%;
    width: 62px;
    transform: translate(-50%, -50%);
    line-height: 1.05;
    text-align: center;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut strong {
    font-size: 21px !important;
    line-height: 1;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut span {
    margin-top: 4px;
    font-size: 8px !important;
    line-height: 1.15;
    white-space: nowrap;
}

.sidebar-user-card {
    cursor: pointer;
    border-radius: 10px;
    transition: background-color .18s ease;
}

.sidebar-user-card:hover,
.sidebar-user-card:focus-visible,
.sidebar-user-card[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    outline: 0;
}

.sidebar-user-card > .ti {
    transition: transform .18s ease;
}

.sidebar-user-card[aria-expanded="true"] > .ti {
    transform: rotate(-90deg);
}

.sidebar-account-menu {
    position: absolute;
    right: 14px;
    bottom: 76px;
    left: 14px;
    z-index: 20;
    display: none;
    padding: 7px;
    border: 1px solid rgba(188, 205, 236, 0.3);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(5, 17, 39, 0.28);
}

.sidebar-account-menu.is-open {
    display: block;
}

.sidebar-account-menu a {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #d92d20;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-account-menu a:hover,
.sidebar-account-menu a:focus-visible {
    color: #b42318;
    background: #fff1f1;
}

.sidebar-account-menu .ti {
    font-size: 18px;
}

@media (min-width: 1200px) {
    /* Keep the compact menu stable; hovering must not produce the half-expanded state. */
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu {
        width: 70px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand {
        height: 68px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-link > img {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-text,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-profile,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link > div,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-sub,
    html.layout-menu-collapsed:not(.customizer-hide) .sidebar-help-card,
    html.layout-menu-collapsed:not(.customizer-hide) .sidebar-user-card,
    html.layout-menu-collapsed:not(.customizer-hide) .sidebar-account-menu {
        display: none !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-link {
        width: 46px !important;
        min-width: 46px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        justify-content: center !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-icon {
        margin: 0 !important;
    }
}

/* Precision corrections from the desktop reference comparison. */
html:not(.customizer-hide) .layout-menu .app-brand-link > img {
    display: block !important;
    width: 92px !important;
    height: 92px !important;
}

html:not(.customizer-hide) .layout-menu .app-brand {
    height: 178px;
}

html:not(.customizer-hide) .layout-menu .app-brand-text {
    font-size: 18px;
    line-height: 1.15;
}

html:not(.customizer-hide) .layout-menu .sidebar-profile {
    margin-top: -9px;
    margin-bottom: 4px;
}

body:has(.dashboard-welcome-banner) #layout-navbar::after {
    display: none !important;
    content: none !important;
}

.dashboard-header-search {
    margin-left: 16px;
}

.sidebar-help-card {
    bottom: 88px;
}

.sidebar-user-card {
    position: absolute;
    right: 16px;
    bottom: 14px;
    left: 16px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    min-height: 58px;
    align-items: center;
    gap: 9px;
    color: #fff;
}

.sidebar-user-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #236df5, #7044f5);
    font-size: 14px;
    font-weight: 700;
}

.sidebar-user-card > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sidebar-user-card strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-card small {
    color: #b9c7df;
    font-size: 9px;
}

.sidebar-user-card > .ti {
    color: #dce6fa;
}

.ociu-filter-field {
    position: relative;
    padding-left: 42px;
}

.ociu-filter-leading-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    width: 34px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    color: #285df0;
    background: #f7f9ff;
    font-size: 18px;
}

.ociu-filter-search-field {
    padding-left: 42px;
}

body:has(.dashboard-welcome-banner) .ociu-filter-form {
    grid-template-columns: repeat(3, minmax(150px, .85fr)) minmax(190px, 1fr) minmax(280px, 1.5fr) auto;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .avatar {
    left: 16px !important;
    right: auto !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-15%) !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .avatar-initial {
    color: inherit !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .avatar-initial .ti,
html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .avatar-initial .ti::before {
    font-size: 24px !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .card-body > .mb-1,
html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .card-body > .d-flex {
    margin-left: 52px !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .card-body > .mb-0 {
    width: calc(100% - 84px) !important;
}

.dashboard-approval-grid {
    grid-template-columns: minmax(125px, 1.05fr) repeat(5, minmax(90px, 1fr));
}

.dashboard-approval-corner,
.dashboard-approval-stage,
.dashboard-approval-direction,
.dashboard-approval-value {
    min-height: 43px !important;
}

.dashboard-approval-corner,
.dashboard-approval-stage {
    min-height: 32px !important;
}

.dashboard-approval-direction {
    white-space: nowrap;
}

.dashboard-approval-value .ti {
    width: 22px;
    height: 22px;
    font-size: 13px;
}

.station-age-table th {
    padding: 7px 8px !important;
    font-size: 9px;
    white-space: nowrap;
}

.station-age-table td {
    padding: 6px 8px !important;
    font-size: 11px;
}

body:has(.dashboard-welcome-banner) .dashboard-station-age-card .table-responsive {
    max-height: 220px;
}

@media (min-width: 1200px) and (max-height: 900px) {
    body:has(.dashboard-welcome-banner) .content-wrapper > .container-xxl:first-child {
        width: 117.65%;
        max-width: 117.65%;
        zoom: 0.85;
    }

    .sidebar-help-card {
        bottom: 76px;
        min-height: 54px;
    }

    .sidebar-user-card {
        min-height: 50px;
    }
}

/* Full dashboard composition matching the supplied reference. */
.dashboard-header-search {
    display: flex;
    width: min(720px, 62vw);
    height: 40px;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    padding: 0 10px 0 13px;
    border: 1px solid #d9e2ef;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 49, 80, 0.05);
}

.dashboard-header-search .ti {
    color: #667da7 !important;
    font-size: 18px !important;
}

.dashboard-header-search input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    color: #243653;
    background: transparent;
    font-size: 12px;
}

.dashboard-header-search kbd {
    padding: 3px 7px;
    border: 1px solid #e1e7f0;
    border-radius: 6px;
    color: #7a88a1;
    background: #f7f9fc;
    font-size: 10px;
    font-weight: 500;
}

.sidebar-help-card {
    position: absolute;
    right: 16px;
    bottom: 20px;
    left: 16px;
    display: flex;
    min-height: 62px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(173, 194, 232, 0.25);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-help-card > .ti {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #314a70;
    font-size: 20px;
}

.sidebar-help-card span {
    display: flex;
    flex-direction: column;
}

.sidebar-help-card strong {
    font-size: 11px;
}

.sidebar-help-card small {
    color: #b8c5dc;
    font-size: 10px;
}

.dashboard-welcome-banner {
    position: relative;
    display: flex;
    min-height: 126px;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 20px 30px;
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(8, 30, 67, 0.96) 0%, rgba(8, 30, 67, 0.42) 54%, rgba(8, 30, 67, 0.18) 100%),
        url('../img/ociu/dashboard-hero-v2.png') center / cover no-repeat;
    box-shadow: 0 8px 20px rgba(18, 48, 91, 0.18);
}

.dashboard-welcome-copy {
    position: relative;
    z-index: 1;
}

.dashboard-welcome-copy h1 {
    margin: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.18;
}

.dashboard-welcome-copy p {
    margin: 7px 0 0;
    color: #dbe7fb;
    font-size: 13px;
}

.dashboard-welcome-time {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 120px;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.38);
}

.dashboard-welcome-time span,
.dashboard-welcome-time strong {
    color: #d9e5f8;
    font-size: 11px;
}

.dashboard-welcome-time b {
    margin-top: 8px;
    color: #fff;
    font-size: 20px;
}

body:has(.dashboard-welcome-banner) .ociu-filter-card {
    padding: 9px 12px;
}

body:has(.dashboard-welcome-banner) .ociu-filter-field:has(#filter-document-uploaded) {
    display: none;
}

body:has(.dashboard-welcome-banner) .ociu-filter-form {
    grid-template-columns: repeat(3, minmax(130px, .8fr)) minmax(180px, 1fr) minmax(260px, 1.45fr) auto;
    gap: 10px;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] {
    min-height: 110px !important;
    border-radius: 10px !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .card-body {
    padding: 13px 16px !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) [class*="card-border-shadow-"] .avatar {
    right: 15px !important;
    width: 58px !important;
    height: 58px !important;
}

html:not(.customizer-hide) body:has(.dashboard-welcome-banner) .card-border-shadow-info {
    background: linear-gradient(125deg, #236de5 0%, #3ea0ff 100%);
}

.dashboard-side-card > .card,
.dashboard-quick-card > .card,
.dashboard-alert-card > .card {
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(33, 52, 84, 0.07);
}

.dashboard-side-card .card-header,
.dashboard-quick-card .card-header,
.dashboard-alert-card .card-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5eaf1;
    color: #14264a;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-side-card .card-header > .ti,
.dashboard-quick-card .card-header > .ti,
.dashboard-alert-card .card-header > .ti {
    color: #1760ec;
    font-size: 20px;
}

.dashboard-side-card .card-header button,
.dashboard-alert-card .card-header button {
    display: inline-flex;
    height: 26px;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 0 9px;
    border: 1px solid #dce5f2;
    border-radius: 7px;
    color: #1655e6;
    background: #f6f9ff;
    font-size: 10px;
}

.dashboard-status-card .card-body {
    display: flex;
    min-height: 142px;
    align-items: center;
    gap: 20px;
    padding: 12px 18px;
}

.dashboard-status-donut {
    display: grid;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#23bd6f 0 33%, #ff8a16 33% 100%);
}

.dashboard-status-donut::before {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    content: '';
}

.dashboard-status-donut > div {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-status-donut strong {
    color: #14264a;
    font-size: 21px;
}

.dashboard-status-donut span {
    color: #6c7a91;
    font-size: 9px;
}

.dashboard-status-legend {
    min-width: 0;
    flex: 1;
}

.dashboard-status-legend > div {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    color: #34445f;
    font-size: 11px;
}

.dashboard-status-legend i,
.dashboard-recent-list > div > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.is-completed { background: #16b56b; }
.is-pending { background: #ff9214; }
.is-progress { background: #2897ed; }

.dashboard-recent-list > div {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    min-height: 39px;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-bottom: 1px solid #edf0f5;
}

.dashboard-recent-list > div:last-child { border-bottom: 0; }
.dashboard-recent-list span { display: flex; min-width: 0; flex-direction: column; }
.dashboard-recent-list strong { overflow: hidden; color: #263855; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-recent-list small { color: #70809a; font-size: 9px; }
.dashboard-recent-list time { color: #70809a; font-size: 9px; white-space: nowrap; }

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    padding: 11px 13px;
}

.dashboard-quick-actions :is(button, a) {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.dashboard-quick-actions .is-primary { color:#fff; background:linear-gradient(110deg,#315cf5,#7040f5); }
.dashboard-quick-actions .is-blue { color:#1760dc; background:#e9f3ff; }
.dashboard-quick-actions .is-green { color:#11925a; background:#e8f8f0; }
.dashboard-quick-actions .is-orange { color:#e66713; background:#fff3e5; }
.dashboard-quick-actions .is-purple { color:#8a2cc8; background:#f5e8ff; }

.dashboard-alert-card .card-header > .ti { color: #f04444; }
.dashboard-alert-list { padding: 8px 10px; }
.dashboard-alert-list > div { display:flex; min-height:25px; align-items:center; gap:7px; margin-bottom:4px; padding:4px 8px; border-radius:6px; font-size:10px; }
.dashboard-alert-list .is-danger { color:#d92d20; background:#feecee; }
.dashboard-alert-list .is-warning { color:#9b6712; background:#fff5dc; }

@media (max-width: 1199.98px) {
    .dashboard-header-search { width: min(600px, 60vw); }
    .sidebar-help-card { display: none; }
}

@media (max-width: 991.98px) {
    .dashboard-header-search { display: none; }
    body:has(.dashboard-welcome-banner) .ociu-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-status-card .card-body { justify-content: center; }
}

@media (max-width: 575.98px) {
    .dashboard-welcome-banner { min-height: 150px; padding: 18px; }
    .dashboard-welcome-copy h1 { font-size: 20px; }
    .dashboard-welcome-time { display: none; }
    body:has(.dashboard-welcome-banner) .ociu-filter-form { grid-template-columns: 1fr; }
    .dashboard-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vuexy collapsed-menu state */
@media (min-width: 1200px) {
    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu {
        width: 70px;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-page {
        padding-left: 70px;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .app-brand {
        height: 68px;
        padding: 0;
        justify-content: center;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .app-brand-text,
    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .sidebar-profile strong {
        display: none;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .sidebar-profile {
        height: 102px;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .sidebar-profile img {
        width: 58px;
        height: 58px;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-inner {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-link {
        width: 46px;
        min-width: 46px;
        margin-right: auto;
        margin-left: auto;
        justify-content: center;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html.layout-menu-collapsed:not(.layout-menu-hover):not(.customizer-hide) .layout-menu .menu-item {
        width: 100%;
    }

    html.layout-menu-collapsed:not(.layout-menu-hover):not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link > div {
        display: none;
    }

    html.layout-menu-collapsed:not(.layout-menu-hover):not(.customizer-hide) .layout-menu .menu-item.active > .menu-link {
        width: 46px;
        min-width: 46px;
        margin-right: auto;
        margin-left: auto;
        border-radius: 8px;
        justify-content: center;
        box-shadow: 0 5px 12px rgba(37, 77, 168, 0.24);
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-icon {
        margin: 0;
    }

    html.layout-menu-collapsed:not(.layout-menu-hover):not(.customizer-hide) .layout-menu .app-brand-link > img {
        display: block;
        width: 44px;
        height: 44px !important;
        margin: 0;
        filter: none;
    }

    html.layout-menu-collapsed:not(.layout-menu-hover):not(.customizer-hide) .layout-menu .sidebar-profile {
        display: none;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu {
        width: 255px;
        box-shadow: 8px 0 22px rgba(24, 34, 60, 0.14);
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand {
        padding: 0 32px;
        justify-content: flex-start;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-link > img {
        display: none;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-link {
        width: 227px;
        min-width: 227px;
        margin-right: auto;
        margin-left: auto;
        justify-content: flex-start;
        padding: 10px 12px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link > div {
        display: block;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-toggle {
        padding-right: calc(12px + 1.76em);
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-icon {
        margin-right: 8px;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-text,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-profile strong {
        display: block;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-text {
        transform: translateY(20px);
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-profile {
        display: flex;
        height: 142px;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-profile img {
        width: 84px;
        height: 84px;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-toggle::after {
        display: block !important;
        right: 14px;
        opacity: 1;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-item.open > .menu-sub {
        display: block !important;
    }
}

@media (min-width: 992px) {
    /* Deliberately doubled page class keeps these final semantic mappings above
       the legacy role-dependent nth-child table rules. */
    body.message-list-page.message-list-page .pending-message-table tr {
        grid-template-columns: 42px minmax(245px, 1.25fr) minmax(190px, 1fr) minmax(145px, .8fr) minmax(135px, .8fr) 112px 92px !important;
        grid-template-rows: repeat(4, minmax(25px, auto)) !important;
    }

    body.message-list-page.message-list-page .pending-message-table .message-col-individual { display: none !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-sn { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-person { grid-column: 2 !important; grid-row: 1 / span 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-overall { grid-column: 3 !important; grid-row: 1 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-pending { grid-column: 3 !important; grid-row: 2 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-from { grid-column: 3 !important; grid-row: 3 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-direction { grid-column: 3 !important; grid-row: 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-station { grid-column: 4 !important; grid-row: 1 / span 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-last-action { grid-column: 2 !important; grid-row: 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-history { grid-column: 5 !important; grid-row: 1 / span 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-document { grid-column: 6 !important; grid-row: 1 / span 4 !important; }
    body.message-list-page.message-list-page .pending-message-table .message-col-action { grid-column: 7 !important; grid-row: 1 / span 4 !important; }

    body.message-list-page.message-list-page .pending-message-table thead,
    body.message-list-page.message-list-page .pending-message-table thead tr,
    body.message-list-page.message-list-page .pending-message-table thead th {
        opacity: 1 !important;
        background: #f3f6fb !important;
        background-color: #f3f6fb !important;
    }

    body.message-list-page.message-list-page .pending-message-table thead tr { grid-template-rows: 48px !important; }
    body.message-list-page.message-list-page .pending-message-table thead .message-col-overall::after { content: none !important; }
    body.message-list-page.message-list-page .pending-message-table thead .message-col-pending,
    body.message-list-page.message-list-page .pending-message-table thead .message-col-from,
    body.message-list-page.message-list-page .pending-message-table thead .message-col-direction,
    body.message-list-page.message-list-page .pending-message-table thead .message-col-last-action,
    body.message-list-page.message-list-page .pending-message-table thead .message-col-document + .message-col-document { display: none !important; }
}

/* Message-table semantic columns: final precedence over legacy nth-child rules. */
@media (min-width: 992px) {
    html:not(.customizer-hide) body.message-list-page .pending-message-table tr {
        grid-template-columns: 42px minmax(245px, 1.25fr) minmax(190px, 1fr) minmax(145px, .8fr) minmax(135px, .8fr) 112px 92px !important;
        grid-template-rows: repeat(4, minmax(25px, auto)) !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table thead,
    html:not(.customizer-hide) body.message-list-page .pending-message-table thead tr,
    html:not(.customizer-hide) body.message-list-page .pending-message-table thead th {
        opacity: 1 !important;
        background: #f3f6fb !important;
        background-color: #f3f6fb !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table thead tr {
        grid-template-rows: 48px !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-individual {
        display: none !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table thead .message-col-overall::after {
        content: none !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-sn { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-person { grid-column: 2 !important; grid-row: 1 / span 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-overall { grid-column: 3 !important; grid-row: 1 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-pending { grid-column: 3 !important; grid-row: 2 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-from { grid-column: 3 !important; grid-row: 3 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-direction { grid-column: 3 !important; grid-row: 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-station { grid-column: 4 !important; grid-row: 1 / span 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-last-action { grid-column: 2 !important; grid-row: 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-history { grid-column: 5 !important; grid-row: 1 / span 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-document { grid-column: 6 !important; grid-row: 1 / span 4 !important; }
    html:not(.customizer-hide) body.message-list-page .pending-message-table .message-col-action { grid-column: 7 !important; grid-row: 1 / span 4 !important; }

    html:not(.customizer-hide) body.message-list-page .pending-message-table thead .message-col-pending,
    html:not(.customizer-hide) body.message-list-page .pending-message-table thead .message-col-from,
    html:not(.customizer-hide) body.message-list-page .pending-message-table thead .message-col-direction,
    html:not(.customizer-hide) body.message-list-page .pending-message-table thead .message-col-last-action,
    html:not(.customizer-hide) body.message-list-page .pending-message-table thead .message-col-document + .message-col-document {
        display: none !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table tbody .message-col-overall,
    html:not(.customizer-hide) body.message-list-page .pending-message-table tbody .message-col-pending,
    html:not(.customizer-hide) body.message-list-page .pending-message-table tbody .message-col-from,
    html:not(.customizer-hide) body.message-list-page .pending-message-table tbody .message-col-direction {
        display: flex !important;
        gap: 0 !important;
        padding: 4px 8px !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table tbody .message-col-last-action {
        display: flex !important;
        align-self: end !important;
        padding: 0 10px 8px 86px !important;
    }

    html:not(.customizer-hide) body.message-list-page .pending-message-table tbody .message-col-document > div {
        position: static !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Vertical submenu alignment */
html:not(.customizer-hide) .layout-menu .menu-sub {
    margin: 2px 0 5px;
    padding: 0 0 0 36px;
}

html:not(.customizer-hide) .layout-menu .menu-sub .menu-item {
    margin: 0;
}

html:not(.customizer-hide) .layout-menu .menu-sub .menu-link {
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 6px;
}

html:not(.customizer-hide) .layout-menu .menu-sub .menu-icon,
html:not(.customizer-hide) .layout-menu .menu-sub .menu-link::before {
    display: none;
}

/* Ensure the dashboard pictograms use the reference scale */
html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial .ti,
html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial .ti::before {
    display: block;
    font-size: 68px !important;
    line-height: 1 !important;
}

/* Built-in Vuexy dark-style integration */
.dark-style:not(.customizer-hide) body,
.dark-style:not(.customizer-hide) .content-wrapper {
    background: #171925;
}

.dark-style:not(.customizer-hide) .layout-menu {
    border-right-color: #34384d;
    background: #232636 !important;
}

.dark-style:not(.customizer-hide) .layout-menu .app-brand-text,
.dark-style:not(.customizer-hide) .layout-menu .sidebar-profile strong {
    color: #f4f5fa;
}

.dark-style:not(.customizer-hide) .layout-menu .menu-link {
    color: #cfd3e6;
}

.dark-style:not(.customizer-hide) .layout-menu .menu-icon {
    color: #9ba9e8;
}

.dark-style:not(.customizer-hide) .content-wrapper:has(.card-border-shadow-primary) > .container-xxl:first-child::before {
    color: #f0f2fa;
}

.dark-style:not(.customizer-hide) .dashboard-flow-card > .card {
    border-color: #3a3e52;
    background: #232636;
}

.dark-style:not(.customizer-hide) .dashboard-flow-card .card-header {
    border-bottom-color: #3a3e52;
    color: #f0f2fa;
}

.dark-style:not(.customizer-hide) .dashboard-flow-card .flow-chart-placeholder {
    border-color: #41465d;
}

.dark-style:not(.customizer-hide) .content-footer,
.dark-style:not(.customizer-hide) .content-footer .text-body {
    color: #b7bbce !important;
}

@media (max-width: 1199.98px) {
    html:not(.customizer-hide) #layout-navbar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html:not(.customizer-hide) #layout-navbar .navbar-nav {
        gap: 4px;
    }

    html:not(.customizer-hide) #layout-navbar .app-header-action {
        width: 34px;
        height: 34px;
    }

    html:not(.customizer-hide) #layout-navbar .app-header-action .ti {
        font-size: 22px;
    }

    html:not(.customizer-hide) #layout-navbar .avatar {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 575.98px) {
    html:not(.customizer-hide) #layout-navbar {
        min-height: 64px;
        padding: 0 10px;
    }

    html:not(.customizer-hide) #layout-navbar .layout-menu-toggle {
        margin-right: 4px !important;
    }

    html:not(.customizer-hide) #layout-navbar .layout-menu-toggle .nav-link {
        margin-right: 0 !important;
    }

    html:not(.customizer-hide) #layout-navbar .navbar-nav {
        gap: 1px;
    }

    html:not(.customizer-hide) #layout-navbar .app-header-action {
        width: 30px;
        height: 34px;
    }

    html:not(.customizer-hide) #layout-navbar .app-header-action .ti {
        font-size: 20px;
    }

    html:not(.customizer-hide) #layout-navbar .dropdown-user {
        margin: 0 1px;
    }

    html:not(.customizer-hide) #layout-navbar .avatar {
        width: 36px;
        height: 36px;
    }

    html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar {
        right: 20px;
        width: 76px;
        height: 76px;
    }

    html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial .ti,
    html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial .ti::before {
        font-size: 58px !important;
    }
}
@media screen and (max-width: 1185px) {
.bg-menu-theme .menu-text {
    color: #444050;
    text-wrap-mode: wrap;
    word-wrap: break-word;
    inline-size: 135px;
    font-size: 17px;
}
}

/* Authenticated application shell */
html:not(.customizer-hide) body {
    background: #f4f7fb;
}

html:not(.customizer-hide) .layout-menu {
    width: 255px;
    border-right: 1px solid #d8dee9;
    background: #fff !important;
    box-shadow: none;
}

html:not(.customizer-hide) .layout-menu .app-brand {
    height: 205px;
    padding: 22px 24px 16px;
    align-items: flex-start;
}

html:not(.customizer-hide) .layout-menu .app-brand-link {
    width: 100%;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 22px;
}

html:not(.customizer-hide) .layout-menu .app-brand-link img {
    width: 92px;
    height: 92px !important;
    margin: 0 auto;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(20, 45, 93, 0.12));
}

html:not(.customizer-hide) .layout-menu .app-brand-text {
    width: 100%;
    color: #111827;
    font-size: 19px;
    font-weight: 700 !important;
    line-height: 1.25;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
}

html:not(.customizer-hide) .layout-menu .layout-menu-toggle {
    display: none;
}

html:not(.customizer-hide) .layout-menu .menu-inner {
    padding: 6px 12px 20px !important;
}

html:not(.customizer-hide) .layout-menu .menu-item {
    margin: 3px 0;
}

html:not(.customizer-hide) .layout-menu .menu-link {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #183a93;
    font-size: 15px;
    font-weight: 500;
}

html:not(.customizer-hide) .layout-menu .menu-icon {
    color: #163caa;
}

html:not(.customizer-hide) .layout-menu .menu-item.active > .menu-link {
    color: #fff;
    background: linear-gradient(135deg, #254da8 0%, #173a8b 100%);
    box-shadow: 0 6px 14px rgba(27, 63, 151, 0.22);
}

html:not(.customizer-hide) .layout-menu .menu-item.active > .menu-link .menu-icon {
    color: #fff;
}

html:not(.customizer-hide) .layout-page {
    padding-left: 255px;
}

html:not(.customizer-hide) #layout-navbar {
    min-height: 64px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 24px;
    border-radius: 0;
    color: #fff;
    background: linear-gradient(90deg, #173a8b 0%, #234a9d 100%) !important;
    box-shadow: 0 2px 10px rgba(20, 42, 92, 0.16);
}

html:not(.customizer-hide) #layout-navbar .nav-link,
html:not(.customizer-hide) #layout-navbar .ti {
    color: #fff;
}

html:not(.customizer-hide) #layout-navbar .layout-menu-toggle .ti {
    font-size: 29px;
}

html:not(.customizer-hide) #layout-navbar .avatar {
    width: 42px;
    height: 42px;
}

html:not(.customizer-hide) #layout-navbar .avatar img {
    border: 2px solid rgba(255, 255, 255, 0.88);
    background: #fff;
}

html:not(.customizer-hide) .content-wrapper {
    background: #f4f7fb;
}

html:not(.customizer-hide) .content-wrapper > .container-xxl {
    max-width: none;
    padding: 28px 22px;
}

/* Dashboard overview */
html:not(.customizer-hide) .card-border-shadow-primary,
html:not(.customizer-hide) .card-border-shadow-success,
html:not(.customizer-hide) .card-border-shadow-danger,
html:not(.customizer-hide) .card-border-shadow-info {
    position: relative;
    min-height: 174px;
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(28, 45, 76, 0.16) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html:not(.customizer-hide) .card-border-shadow-primary:hover,
html:not(.customizer-hide) .card-border-shadow-success:hover,
html:not(.customizer-hide) .card-border-shadow-danger:hover,
html:not(.customizer-hide) .card-border-shadow-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 25px rgba(28, 45, 76, 0.2) !important;
}

html:not(.customizer-hide) .card-border-shadow-primary {
    background: linear-gradient(135deg, #a438ed 0%, #7225ce 100%);
}

html:not(.customizer-hide) .card-border-shadow-success {
    background: linear-gradient(135deg, #20bb60 0%, #14853e 100%);
}

html:not(.customizer-hide) .card-border-shadow-danger {
    background: linear-gradient(135deg, #ff6b10 0%, #c93808 100%);
}

html:not(.customizer-hide) .card-border-shadow-info {
    background: linear-gradient(135deg, #14a9df 0%, #0876a8 100%);
}

html:not(.customizer-hide) .card-border-shadow-primary .card-body,
html:not(.customizer-hide) .card-border-shadow-success .card-body,
html:not(.customizer-hide) .card-border-shadow-danger .card-body,
html:not(.customizer-hide) .card-border-shadow-info .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px 20px;
}

html:not(.customizer-hide) .card-border-shadow-primary .card-body > .mb-1,
html:not(.customizer-hide) .card-border-shadow-success .card-body > .mb-1,
html:not(.customizer-hide) .card-border-shadow-danger .card-body > .mb-1,
html:not(.customizer-hide) .card-border-shadow-info .card-body > .mb-1 {
    order: -2;
    margin: 0 0 10px !important;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .d-flex {
    order: -1;
    margin: 0 0 auto !important;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body h4 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: 0 !important;
    transform: translateY(-35%);
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial {
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .avatar-initial .ti {
    font-size: 66px !important;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-0 {
    position: relative;
    width: 58%;
    margin-top: 12px !important;
    padding-top: 11px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .card-body > .mb-0::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    border-radius: 20px;
    background: linear-gradient(90deg, #172033 0 34%, rgba(255, 255, 255, 0.88) 34% 100%);
    content: "";
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .text-heading,
html:not(.customizer-hide) [class*="card-border-shadow-"] .text-muted {
    color: inherit !important;
}

html:not(.customizer-hide) [class*="card-border-shadow-"] .text-muted {
    opacity: 0.72;
}

html:not(.customizer-hide) .content-wrapper:has(.card-border-shadow-primary) > .container-xxl:first-child::before {
    display: block;
    margin: 0 0 22px;
    color: #24344d;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    content: "Dashboard";
}

html:not(.customizer-hide) .content-wrapper:has(.card-border-shadow-primary) .row.g-6 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

html:not(.customizer-hide) .content-footer {
    background: transparent !important;
}

@media (max-width: 1199.98px) {
    html:not(.customizer-hide) .layout-page {
        padding-left: 0;
    }

    html:not(.customizer-hide) .layout-menu .app-brand {
        height: 150px;
    }

    html:not(.customizer-hide) .layout-menu .app-brand-link {
        flex-direction: row;
    }

    html:not(.customizer-hide) .layout-menu .app-brand-link img {
        width: 55px;
        height: 55px !important;
        margin: 0;
    }

    html:not(.customizer-hide) .layout-menu .layout-menu-toggle {
        display: flex;
    }
}

@media (max-width: 575.98px) {
    html:not(.customizer-hide) .content-wrapper > .container-xxl {
        padding: 22px 16px;
    }

    html:not(.customizer-hide) #layout-navbar {
        padding: 0 16px;
    }

    html:not(.customizer-hide) .card-border-shadow-primary,
    html:not(.customizer-hide) .card-border-shadow-success,
    html:not(.customizer-hide) .card-border-shadow-danger,
    html:not(.customizer-hide) .card-border-shadow-info {
        min-height: 158px;
        border-radius: 22px;
    }
}
.form-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem 2.5rem;
    background: linear-gradient(to right bottom, #ffffff, #f8f9fa);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    border: 1px solid rgba(75, 106, 156, 0.1);
}

.form-header {
    text-align: center;
    margin: -2rem -2.5rem 2rem -2.5rem;
    padding: 1.5rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a365d;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 16px 16px 0 0;
    border-bottom: 2px solid rgba(75, 106, 156, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.form-section {
    position: relative;
    margin-bottom: 0.5rem;
}

.form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2c5282;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #2d3748;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.form-input:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
    outline: none;
}

.form-input::placeholder {
    color: #a0aec0;
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.file-input {
    border: 2px dashed #b3c0d1;
    padding: 1rem;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-input:hover {
    border-color: #4299e1;
    background-color: #f7fafc;
}

.submit-btn {
    background: linear-gradient(135deg, #4299e1, #2b6cb0);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(66, 153, 225, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: auto;
    min-width: 200px;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #2b6cb0, #2c5282);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(66, 153, 225, 0.3);
}

.submit-btn:active {
    transform: translateY(0);
}

.form-label span {
    color: #e53e3e;
    margin-left: 0.25rem;
}

#uploaded_ciminal_photo_preview {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
}

@media (max-width: 1280px) {
    .form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-container {
        padding: 1.5rem;
    }
    
    .form-header {
        margin: -1.5rem -1.5rem 1.5rem -1.5rem;
        font-size: 1.5rem;
    }
}

.pending-message-table {
    width: 100% !important;
    overflow-x: auto;
}

td,
th {
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #f8f9fa;
}

input:disabled {
    cursor: not-allowed;
}

.pending-message-table {
    max-height: 65vh;
    overflow-x: auto;
    overflow-y: auto;
}

.pending-message-table::-webkit-scrollbar {
    width: 25px;
    height: 25px;
}

.pending-message-table::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 8px;
}

.pending-message-table::-webkit-scrollbar-thumb {
    background-color: #c2c2c2;
    border-radius: 8px;
    border: 3px solid #f0f0f0;
}

.pending-message-table::-webkit-scrollbar-thumb:hover {
    background-color: #c2c2c2;
}

.pending-message-table::-webkit-scrollbar-corner {
    background: #f0f0f0;
}

.pending-message-table table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pending-message-table table th {
    padding: 10px;
    font-weight: bold;
    text-align: left;
    border: 1px solid white;
}

.pending-message-table table td {
    padding: 10px;
    text-align: left;
}

.table-light th,
.table-light td {
    padding: 10px;
    text-align: left;
    font-size: 14px;
}

.table-light th {
    background-color: #f4f4f9;
    color: #333;
    font-weight: 600;
}

tbody tr {
    transition: background-color 0.3s ease;
}

tbody tr:hover {
    background-color: #f1f5f9;
}

.flex {
    display: flex;
    align-items: center;
}

.items-center {
    align-items: center;
    place-content: center;
}

.action-btn button {
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.action-btn button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.view-btn {
    background-color: #38b2ac;
    color: white;
}


.view-btn:hover {
    background-color: #319795;
}

.edit-btn {
    background-color: #e53e3e;
    color: white;
}


.edit-btn:hover {
    background-color: #c53030;
}

.view-btn i {
    height: 16px;
    width: 21px;
}

.edit-btn i {
    height: 16px;
    width: 21px;
}

.status-btn {
    background-color: #fff7e6;
    border-radius: 20px;
    padding: 8px 16px;
    color: #e2a300;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.status-btn .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f5c100;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.status-btn:hover {
    background-color: #f1e1a1;
    transform: scale(1.05);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.15);
}

.status-btn.pending {
    background-color: #fff7e6;
    color: #f5c100;
    border: 2px solid #f5c100;
}

.status-btn.pending .dot {
    background-color: #f5c100;
}

.status-btn.completed {
    background-color: #d1f7e1;
    color: #28a745;
    border: 2px solid #28a745;

}

.status-btn.completed .dot {
    background-color: #28a745;
}

.status-btn.pending:hover {
    background-color: #f1e1a1;
    color: #f5c100;
}

.status-btn.completed:hover {
    background-color: #a4d5b6;
    color: #28a745;
}


.text-black {
    color: #333;
}

.text-gray-600 {
    color: #718096;
}

.text-blue-500 {
    color: #3182ce;
}

.text-blue-600 {
    color: #2b6cb0;
}

.text-xs {
    font-size: 12px;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

img {
    border-radius: 50%;
    object-fit: cover;
}

img.h-12 {
    width: 48px;
    height: 48px;
}

.space-x-3 {
    margin-left: 12px;
    margin-right: 12px;
}

.photo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #888;
    font-size: 18px;
    margin-right: 30px;
}

.no-photo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

p {
    margin-bottom: 0px !important;
}

/* Pending list: compact all existing dynamic cells without horizontal scrolling */
@media (min-width: 992px) {
    html:not(.customizer-hide) .pending-message-table {
        width: 100%;
        overflow: hidden !important;
    }

    html:not(.customizer-hide) .pending-message-table table,
    html:not(.customizer-hide) .pending-message-table thead,
    html:not(.customizer-hide) .pending-message-table tbody {
        display: block;
        width: 100%;
    }

    html:not(.customizer-hide) .pending-message-table tr {
        display: grid;
        grid-template-columns: 38px 260px 150px 128px 150px minmax(130px, 1fr) 76px 58px;
        width: 100%;
        align-items: stretch;
    }

    html:not(.customizer-hide) .pending-message-table th,
    html:not(.customizer-hide) .pending-message-table td {
        display: flex;
        min-width: 0;
        align-items: center;
        padding: 10px;
        white-space: normal;
    }

    html:not(.customizer-hide) .pending-message-table thead th {
        grid-row: 1 !important;
    }

    html:not(.customizer-hide) .pending-message-table th:nth-child(1),
    html:not(.customizer-hide) .pending-message-table td:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(2),
    html:not(.customizer-hide) .pending-message-table td:nth-child(2) { grid-column: 2; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(3) { grid-column: 3; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(3) { grid-column: 3; grid-row: 1; padding-bottom: 4px; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(4) { grid-column: 3; grid-row: 2; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(5) { grid-column: 3; grid-row: 3; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(6) { grid-column: 3; grid-row: 4; padding-bottom: 10px; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(7),
    html:not(.customizer-hide) .pending-message-table td:nth-child(7) { grid-column: 4; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(8),
    html:not(.customizer-hide) .pending-message-table td:nth-child(8) { grid-column: 5; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(9),
    html:not(.customizer-hide) .pending-message-table td:nth-child(9) { grid-column: 6; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(10) { grid-column: 7; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(10) { grid-column: 7; grid-row: 1 / span 2; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(11) { grid-column: 7; grid-row: 3 / span 2; }
    html:not(.customizer-hide) .pending-message-table th:nth-child(12),
    html:not(.customizer-hide) .pending-message-table td:nth-child(12) { grid-column: 8; grid-row: 1 / span 4; }

    html:not(.customizer-hide) .pending-message-table th:nth-child(3)::after {
        content: " Summary";
    }

    html:not(.customizer-hide) .pending-message-table th:nth-child(10) {
        font-size: 0;
    }

    html:not(.customizer-hide) .pending-message-table th:nth-child(10)::after {
        font-size: 13px;
        content: "Documents";
    }

    html:not(.customizer-hide) .pending-message-table th:nth-child(4),
    html:not(.customizer-hide) .pending-message-table th:nth-child(5),
    html:not(.customizer-hide) .pending-message-table th:nth-child(6),
    html:not(.customizer-hide) .pending-message-table th:nth-child(11) {
        display: none;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-child(4),
    html:not(.customizer-hide) .pending-message-table td:nth-child(5),
    html:not(.customizer-hide) .pending-message-table td:nth-child(6) {
        gap: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 13px;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-child(4)::before { content: "Pending at:"; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(5)::before { content: "From:"; }
    html:not(.customizer-hide) .pending-message-table td:nth-child(6)::before { content: "Direction:"; }

    html:not(.customizer-hide) .pending-message-table td:nth-child(4)::before,
    html:not(.customizer-hide) .pending-message-table td:nth-child(5)::before,
    html:not(.customizer-hide) .pending-message-table td:nth-child(6)::before {
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-child(10),
    html:not(.customizer-hide) .pending-message-table td:nth-child(11),
    html:not(.customizer-hide) .pending-message-table td:nth-child(12) {
        justify-content: center;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-child(12) > div {
        flex-direction: column;
        gap: 8px;
    }

    html:not(.customizer-hide) .pending-message-table tbody {
        white-space: normal !important;
    }
}

/* Final desktop table maps: pending has 12 cells; completed/inactive have 13 */
@media (min-width: 1200px) {
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) tr,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) tr {
        grid-template-columns: 40px 290px 200px 140px minmax(160px, 1fr) 92px 78px;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) tbody tr {
        grid-template-rows: repeat(4, minmax(28px, auto));
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) tbody tr {
        grid-template-rows: repeat(5, minmax(26px, auto));
    }

    html:not(.customizer-hide) .pending-message-table tbody td {
        border-right: 0;
    }

    /* Pending table */
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(1),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(2),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(2) { grid-column: 2; grid-row: 1 / span 4; padding-bottom: 30px; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(3) { grid-column: 3; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(3) { grid-column: 3; grid-row: 1; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(4) { grid-column: 3; grid-row: 2; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(5) { grid-column: 3; grid-row: 3; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(6) { grid-column: 3; grid-row: 4; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(7),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(7) { grid-column: 4; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(8) { grid-column: 2; grid-row: 4; z-index: 2; align-self: end; padding: 0 10px 8px 86px; font-size: 12px; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(9),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(9) { grid-column: 5; grid-row: 1 / span 4; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(10) { grid-column: 6; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(10) { grid-column: 6; grid-row: 1 / span 2; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(11) { grid-column: 6; grid-row: 3 / span 2; }
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(12),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(12) { grid-column: 7; grid-row: 1 / span 4; }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(8),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(11) { display: none; }

    /* Completed and inactive tables */
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(1),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(1) { grid-column: 1; grid-row: 1 / span 5; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(2),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(2) { grid-column: 2; grid-row: 1 / span 5; padding-bottom: 30px; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(3) { grid-column: 3; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(3) { grid-column: 3; grid-row: 1; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(4) { grid-column: 3; grid-row: 2; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5) { grid-column: 3; grid-row: 3; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(6) { grid-column: 3; grid-row: 4; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(7) { grid-column: 3; grid-row: 5; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(8),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(8) { grid-column: 4; grid-row: 1 / span 5; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(9) { grid-column: 2; grid-row: 5; z-index: 2; align-self: end; padding: 0 10px 8px 86px; font-size: 12px; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(10),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(10) { grid-column: 5; grid-row: 1 / span 5; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(11) { grid-column: 6; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(11) { grid-column: 6; grid-row: 1 / span 2; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(12) { grid-column: 6; grid-row: 4 / span 2; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(13),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(13) { grid-column: 7; grid-row: 1 / span 5; }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(4),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(5),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(6),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(7),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(9),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(12) { display: none; }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(3) {
        font-size: 0;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(3)::after {
        font-size: 13px;
        content: "Status Summary";
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(11) {
        font-size: 0;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(11)::after {
        font-size: 13px;
        content: "Documents";
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(10) {
        font-size: 13px;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(10)::after {
        content: none;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(10) {
        justify-content: flex-start;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(3) {
        font-size: 0;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) th:nth-child(3)::after {
        font-size: 13px;
        content: "Status Summary";
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(4)::before { content: none; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5)::before { content: "Pending at:"; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(6)::before { content: "From:"; }
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(7)::before { content: "Direction:"; }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(6),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(7) {
        gap: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 13px;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(6)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(7)::before {
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(8)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(9)::before {
        margin-right: 4px;
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        content: "Last action:";
    }

    /* Remove summary separators and keep labels/values on clean single lines */
    html:not(.customizer-hide) .pending-message-table tbody td:nth-child(3),
    html:not(.customizer-hide) .pending-message-table tbody td:nth-child(4),
    html:not(.customizer-hide) .pending-message-table tbody td:nth-child(5),
    html:not(.customizer-hide) .pending-message-table tbody td:nth-child(6),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) tbody td:nth-child(7) {
        border-bottom: 0;
        white-space: nowrap;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3),
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2),
    html:not(.customizer-hide) .pending-message-table td:last-child {
        justify-content: center;
    }

    html:not(.customizer-hide) .pending-message-table td:last-child > div {
        height: 100%;
        flex-direction: column;
        justify-content: space-around;
        gap: 0;
    }
}

/* Table finish: compact headers, readable summaries and aligned controls */
@media (min-width: 1200px) {
    html:not(.customizer-hide) .pending-message-table {
        max-height: calc(100vh - 245px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) tr,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) tr {
        grid-template-columns: 40px 280px 210px 160px minmax(130px, 1fr) 92px 78px;
    }

    html:not(.customizer-hide) .pending-message-table thead tr {
        grid-template-rows: 54px !important;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) th:nth-child(11) {
        display: flex !important;
    }

    html:not(.customizer-hide) .pending-message-table .status-btn {
        min-width: 0;
        padding: 5px 11px;
        border-radius: 18px;
        font-size: 12px;
        line-height: 1.2;
    }

    html:not(.customizer-hide) .pending-message-table .status-btn .dot {
        width: 8px;
        height: 8px;
        margin-right: 7px;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(3),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(3),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(4) {
        gap: 7px;
        justify-content: flex-start;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(3)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(4)::before {
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        content: "Individual Status:";
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(3)::before {
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        content: "Overall Status:";
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(8),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(8) p,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(9),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(9) p {
        font-size: 11px !important;
        line-height: 1.2;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) .icon-container,
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) .icon-container,
    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn,
    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn button {
        display: flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) .icon-container i,
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) .icon-container i,
    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn button i {
        font-size: 19px !important;
        line-height: 1;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3),
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2),
    html:not(.customizer-hide) .pending-message-table td:last-child {
        padding: 4px;
    }
}

@media (min-width: 1200px) {
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) tr,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) tr {
        grid-template-columns: 40px 260px 210px 150px minmax(130px, 1fr) 110px 90px;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(3)::before,
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(4)::before,
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(5)::before,
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(6)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(3)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(4)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(6)::before,
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(7)::before {
        display: inline-block;
        flex: 0 0 92px;
        width: 92px;
        margin-right: 0;
        text-align: left;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(3),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(4),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(5),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(6),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(3),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(4),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(6),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(7) {
        gap: 0;
        padding-right: 6px;
        padding-left: 8px;
    }

    html:not(.customizer-hide) .pending-message-table td:last-child > div {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 104px;
    }

    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn {
        position: absolute;
        left: 50%;
        margin-left: 0 !important;
        transform: translateX(-50%);
    }

    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn:first-child {
        top: 8px;
    }

    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn:nth-child(2) {
        bottom: 8px;
    }

    html:not(.customizer-hide) .pending-message-table th:nth-last-child(3),
    html:not(.customizer-hide) .pending-message-table th:last-child {
        justify-content: center;
        padding-right: 6px;
        padding-left: 6px;
        text-align: center;
    }

    html:not(.customizer-hide) .pending-message-table th:nth-child(2) {
        justify-content: flex-start;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 86px;
        text-align: left;
    }

    html:not(.customizer-hide) .pending-message-table td:last-child {
        padding: 0;
    }

    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(10),
    html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(11) {
        grid-column: 6;
        grid-row: 1 / span 4;
        position: relative;
        padding: 0;
    }

    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(11),
    html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(12) {
        grid-column: 6;
        grid-row: 1 / span 5;
        position: relative;
        padding: 0;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) > div,
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) > div {
        position: absolute;
        left: 50%;
        width: 36px;
        height: 36px;
        margin: 0;
        transform: translateX(-50%);
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) > div {
        top: calc(50% - 42px);
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) > div {
        top: calc(50% + 6px);
        bottom: auto;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) .icon-container a,
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) .icon-container a {
        display: flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) .icon-container a {
        color: #fff;
        background: #ef4444;
        box-shadow: 0 3px 8px rgba(239, 68, 68, 0.22);
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) .icon-container a {
        color: #fff;
        background: #3b82f6;
        box-shadow: 0 3px 8px rgba(59, 130, 246, 0.22);
    }

    html:not(.customizer-hide) .pending-message-table td:nth-last-child(3) .icon-container a i,
    html:not(.customizer-hide) .pending-message-table td:nth-last-child(2) .icon-container a i {
        color: #fff !important;
    }

    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn:first-child {
        top: calc(50% - 42px);
    }

    html:not(.customizer-hide) .pending-message-table td:last-child .action-btn:nth-child(2) {
        top: calc(50% + 6px);
        bottom: auto;
    }
}

/* Document preview: uploads on the left and full-height viewer on the right */
@media (min-width: 992px) {
    body:has(#pdf-viewer) .max-w-7xl > .grid {
        height: calc(100vh - 120px);
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    body:has(#pdf-viewer) .max-w-7xl > .grid > .space-y-6 {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
    }

    body:has(#pdf-viewer) .max-w-7xl > .grid > div:has(#pdf-viewer) {
        display: contents;
    }

    body:has(#pdf-viewer) .max-w-7xl > .grid > div:has(#pdf-viewer) > .p-4 {
        display: flex;
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 0;
        min-height: 0;
        padding: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(24, 34, 60, 0.08);
    }

    body:has(#pdf-viewer) #pdf-viewer {
        width: 100%;
        height: 100% !important;
        min-height: 0;
        flex: 1 1 auto;
    }

    body:has(#pdf-viewer) .ociu-pdf-viewer {
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
    }

    body:has(#pdf-viewer) .max-w-7xl > .grid > div:has(#pdf-viewer) > .border-t {
        grid-column: 1;
        grid-row: 2;
        margin-top: 24px;
        padding: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(24, 34, 60, 0.08);
    }
}

/* One-page PDF preview: fit the active page inside the available viewer. */
.ociu-pdf-viewer {
    display: flex;
    width: 100%;
    min-height: 520px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d9dee8;
    border-radius: 7px;
    background: #eef1f5;
}

.ociu-pdf-toolbar {
    display: flex;
    min-height: 46px;
    flex: 0 0 46px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #d9dee8;
    background: #3d3d3d;
}

.ociu-pdf-nav {
    display: inline-flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    color: #fff;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ociu-pdf-nav:hover:not(:disabled) {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.ociu-pdf-nav:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.ociu-pdf-nav .ti {
    font-size: 18px;
}

.ociu-pdf-page-status {
    margin-left: 4px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
}

.ociu-pdf-canvas-stage {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    background: #dfe3e8;
}

.ociu-pdf-canvas-stage canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
}

.ociu-pdf-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #596273;
    background: #eef1f5;
    font-size: 14px;
}

.ociu-pdf-message[hidden] {
    display: none;
}

@media (max-width: 991.98px) {
    .ociu-pdf-viewer {
        height: 70vh;
        min-height: 480px;
    }
}

/* Static approval journey modal */
.dashboard-journey-card > .card {
    overflow: hidden;
    border: 1px solid #dde2ea;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(24, 34, 60, 0.08);
}

.dashboard-journey-card > .card > .card-header {
    min-height: 48px;
    padding: 13px 18px;
    border-bottom: 1px solid #e5e7eb;
    color: #202939;
    font-size: 16px;
    font-weight: 700;
}

.dashboard-journey-card > .card > .card-body {
    padding: 20px;
    background: #f5f7fb;
}

.dashboard-journey-card .journey-count {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-approval-grid {
    display: grid;
    grid-template-columns: minmax(125px, 0.8fr) repeat(5, minmax(105px, 1fr));
    overflow: hidden;
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    background: #fff;
}

.dashboard-approval-corner,
.dashboard-approval-stage,
.dashboard-approval-direction,
.dashboard-approval-value {
    min-height: 58px;
    border-right: 1px solid #e5e9ef;
    border-bottom: 1px solid #e5e9ef;
}

.dashboard-approval-corner,
.dashboard-approval-stage {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    color: #344054;
    background: #f3f5f8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-approval-corner {
    justify-content: flex-start;
    padding-left: 16px;
    color: #667085;
    font-size: 10px;
}

.dashboard-approval-direction {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #344054;
    background: #fafbfc;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-approval-value {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.dashboard-approval-grid > :nth-child(6n) {
    border-right: 0;
}

.dashboard-approval-grid > :nth-last-child(-n + 6) {
    border-bottom: 0;
}

.dashboard-approval-value button {
    position: relative;
    z-index: 1;
    min-width: 42px;
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    color: #2854dc;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dashboard-approval-value button:hover,
.dashboard-approval-value button.is-active {
    color: #173da7;
    background: #edf3ff;
}

.dashboard-approval-value .ti {
    position: absolute;
    right: -8px;
    z-index: 2;
    color: #8792a2;
    background: #fff;
    font-size: 18px;
    font-weight: 700;
}

.dashboard-approval-value.is-reverse .ti {
    right: auto;
    left: -8px;
}

.dashboard-journey-popover {
    position: fixed;
    z-index: 1090;
    width: 230px;
    overflow: hidden;
    border: 1px solid #dce2eb;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(27, 39, 64, 0.2);
}

.dashboard-journey-popover[hidden] {
    display: none;
}

.dashboard-journey-popover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: #2854dc;
}

.dashboard-journey-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 9px;
    border-bottom: 1px solid #e7eaf0;
}

.dashboard-journey-popover-head > div {
    display: flex;
    flex-direction: column;
}

.dashboard-journey-popover-head strong {
    color: #202939;
    font-size: 13px;
}

.dashboard-journey-popover-head small {
    color: #7a8495;
    font-size: 10px;
}

.dashboard-journey-popover-head button {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dce2eb;
    border-radius: 50%;
    color: #667085;
    background: #fff;
}

.dashboard-journey-stations {
    padding: 5px 12px 8px;
}

.dashboard-journey-stations > div {
    display: flex;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
    color: #475467;
    font-size: 12px;
}

.dashboard-journey-stations > div:last-child {
    border-bottom: 0;
}

.dashboard-journey-stations strong {
    color: #2854dc;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .dashboard-journey-card > .card > .card-body {
        overflow-x: auto;
    }

    .dashboard-approval-grid {
        min-width: 720px;
    }
}

.dark-style:not(.customizer-hide) .dashboard-journey-card > .card,
.dark-style:not(.customizer-hide) .dashboard-journey-card .status-journey-section {
    border-color: #41465a;
    background: #2f3349;
}

.dark-style:not(.customizer-hide) .dashboard-journey-card > .card > .card-header {
    border-color: #41465a;
    color: #e7e9ef;
    background: #2f3349;
}

.dark-style:not(.customizer-hide) .dashboard-journey-card > .card > .card-body {
    background: #25293c;
}

.dark-style:not(.customizer-hide) .dashboard-journey-card .journey-count {
    color: #e7e9ef;
}

/* Dashboard station-wise pending-age preview */
.dashboard-station-age-card > .card {
    overflow: hidden;
    border: 1px solid #dde2ea;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(24, 34, 60, 0.08);
}

.dashboard-station-age-card .card-header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-station-age-card .card-header h5 {
    color: #202939;
    font-size: 15px;
    font-weight: 700;
}

.dashboard-station-age-card .card-header p {
    color: #7a8495;
    font-size: 11px;
}

.station-age-table {
    table-layout: fixed;
}

.station-age-table th,
.station-age-table td {
    padding: 10px 14px;
    border-color: #e6eaf0;
    vertical-align: middle;
}

.station-age-table th {
    color: #5d6676;
    background: #f4f6f9;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
}

.station-age-table th:first-child,
.station-age-table td:first-child {
    width: 28%;
    text-align: left;
}

.station-age-table td {
    color: #344054;
    font-size: 13px;
    text-align: center;
}

.station-age-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.station-age-count {
    display: inline;
    color: #2854dc;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark-style:not(.customizer-hide) .dashboard-station-age-card > .card,
.dark-style:not(.customizer-hide) .dashboard-station-age-card .card-header {
    border-color: #41465a;
    background: #2f3349;
}

.dark-style:not(.customizer-hide) .dashboard-station-age-card .card-header h5,
.dark-style:not(.customizer-hide) .station-age-table td {
    color: #e7e9ef;
}

.dark-style:not(.customizer-hide) .station-age-table th {
    color: #c4c8d4;
    background: #292d42;
}

.dark-style:not(.customizer-hide) .station-age-table tbody tr:nth-child(even) {
    background: #292d42;
}

.status-journey-trigger {
    cursor: pointer;
}

.status-journey-modal .modal-dialog {
    max-width: 1080px;
}

.status-journey-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 55px rgba(20, 30, 55, 0.22);
}

.status-journey-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.status-journey-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d8dde6;
    border-radius: 50%;
    color: #5f6979;
    background: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    margin-left: auto;
}

.status-journey-close:hover {
    border-color: #f3a5a5;
    color: #dc2626;
    background: #fff1f2;
}

.status-journey-modal .modal-title {
    margin: 0 0 3px;
    color: #202939;
    font-size: 17px;
    font-weight: 700;
}

.status-journey-modal .modal-header p {
    margin: 0;
    color: #7b8494;
    font-size: 12px;
}

.status-journey-modal .modal-body {
    padding: 20px;
    background: #f5f7fb;
}

.status-journey-section {
    padding: 14px 16px 18px;
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    background: #fff;
}

.status-journey-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #283142;
    font-size: 13px;
}

.status-journey-heading span {
    padding: 3px 8px;
    border: 1px solid #dfe4ec;
    border-radius: 20px;
    color: #697386;
    font-size: 10px;
}

.status-journey-track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 720px;
}

.status-journey-stage {
    width: 112px;
    display: flex;
    flex: 0 0 112px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.status-journey-node {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 50%;
    color: #fff;
    background: #0aa174;
    box-shadow: 0 4px 10px rgba(10, 161, 116, 0.22);
    font-size: 11px;
    font-weight: 700;
}

.status-journey-stage.is-completed .status-journey-node {
    color: #fff;
    background: #0aa174;
}

.status-journey-stage.is-pending .status-journey-node {
    color: #fff;
    background: #e5484d;
    box-shadow: 0 4px 10px rgba(229, 72, 77, 0.24);
}

.status-journey-stage strong {
    color: #253044;
    font-size: 12px;
}

.status-journey-stage small {
    margin-top: 3px;
    color: #9299a8;
    font-size: 10px;
}

.status-journey-stage.is-completed small {
    color: #079669;
    font-weight: 600;
}

.status-journey-stage.is-pending small {
    color: #dc2626;
    font-weight: 700;
}

.status-journey-arrow {
    margin-top: 7px;
    color: #66758a;
    font-size: 22px;
    font-weight: 700;
    -webkit-text-stroke: 0.7px currentColor;
}

.status-journey-turn {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 54px;
    color: #66758a;
}

.status-journey-turn .ti {
    font-size: 22px;
    font-weight: 700;
    -webkit-text-stroke: 0.7px currentColor;
}

.dark-style .status-journey-modal .modal-content,
.dark-style .status-journey-section {
    border-color: #41465a;
    background: #2f3349;
}

.dark-style .status-journey-modal .modal-header {
    border-color: #41465a;
}

.dark-style .status-journey-modal .modal-title,
.dark-style .status-journey-heading,
.dark-style .status-journey-stage strong {
    color: #e7e9ef;
}

.dark-style .status-journey-modal .modal-body {
    background: #25293c;
}

@media (max-width: 767.98px) {
    .status-journey-modal .modal-body {
        padding: 14px;
    }

    .status-journey-section {
        overflow-x: auto;
    }
}

/* Shared visual-only filter panel */
body:has(.card-border-shadow-primary) .content-wrapper > .container-xxl::before {
    display: none !important;
    content: none !important;
}

body:has(.card-border-shadow-primary) #layout-navbar::after {
    position: absolute;
    top: 50%;
    left: 64px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    content: "Dashboard";
    transform: translateY(-50%);
    pointer-events: none;
}

.ociu-filter-card {
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(24, 34, 60, 0.07);
}

.ociu-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 0.7fr)) minmax(170px, 0.85fr) minmax(190px, 0.95fr) minmax(250px, 1.35fr) auto;
    gap: 12px;
    align-items: end;
}

.ociu-filter-field {
    min-width: 0;
}

.ociu-filter-field label {
    display: block;
    margin: 0 0 3px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}

.ociu-filter-field .form-select,
.ociu-filter-field .form-control {
    height: 36px;
    border-color: #d5dae3;
    border-radius: 7px;
    background-color: #fff;
    color: #273142;
    font-size: 13px;
}

.ociu-filter-search-input {
    position: relative;
}

.ociu-filter-search-input .form-control {
    padding-left: 12px;
}

.ociu-filter-actions {
    display: flex;
    gap: 8px;
}

.ociu-filter-actions .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}

.ociu-filter-search-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    border: 1px solid #2854dc;
    color: #fff;
    background: linear-gradient(90deg, #3478e9, #2854dc);
}

.ociu-filter-search-btn .ti {
    color: #fff !important;
}

.ociu-filter-search-btn:hover {
    border-color: #173da7 !important;
    color: #fff !important;
    background: #2148c7 !important;
    box-shadow: 0 4px 10px rgba(40, 84, 220, 0.24);
}

.ociu-filter-search-btn:hover .ti,
.ociu-filter-search-btn:focus .ti,
.ociu-filter-search-btn:active .ti {
    color: #fff !important;
}

.ociu-filter-clear-btn {
    width: 36px;
    padding: 0;
    border: 1px solid #b8bec9;
    color: #64748b;
    background: #fff;
}

.ociu-filter-clear-btn .ti {
    color: #64748b !important;
}

/* Emphasize the current pending destination */
html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(4),
html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(4)::before,
html:not(.customizer-hide) .pending-message-table table:not(:has(th:nth-child(13))) td:nth-child(4) p,
html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5),
html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5)::before,
html:not(.customizer-hide) .pending-message-table table:has(th:nth-child(13)) td:nth-child(5) p {
    color: #dc2626 !important;
}

.ociu-filter-clear-btn:hover {
    border-color: #f1a4a4;
    color: #dc2626;
    background: #fff1f2;
}

.dark-style:not(.customizer-hide) .ociu-filter-card {
    border-color: #343849;
    background: #25293c;
}

.dark-style:not(.customizer-hide) .ociu-filter-field label {
    color: #c4c8d4;
}

.dark-style:not(.customizer-hide) .ociu-filter-field .form-select,
.dark-style:not(.customizer-hide) .ociu-filter-field .form-control {
    border-color: #44495e;
    background-color: #2f3349;
    color: #e7e9ef;
}

.dark-style:not(.customizer-hide) .ociu-filter-clear-btn {
    border-color: #44495e;
    color: #c4c8d4;
    background: #2f3349;
}

@media (max-width: 991.98px) {
    .ociu-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ociu-filter-search-field,
    .ociu-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .ociu-filter-card {
        padding: 10px;
    }

    .ociu-filter-form {
        grid-template-columns: 1fr;
    }

    .ociu-filter-search-field,
    .ociu-filter-actions {
        grid-column: auto;
    }

    .ociu-filter-search-btn {
        flex: 0 0 40px;
    }
}

.fixwidthcolum{
    max-width: 700px!important;
    text-wrap-mode: wrap;
    text-wrap: auto;

}

.submit-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .crimeSaveLoader {
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        animation: spin 1s linear infinite;
        display: none;
        margin-left: 10px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

/* Final dashboard density overrides: keep the primary view compact. */
html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] {
    min-height: 112px !important;
    border-radius: 16px !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body {
    padding: 13px 18px !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-1 {
    margin-bottom: 4px !important;
    font-size: 14px !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-1::after {
    display: inline !important;
    margin: 0 0 0 5px !important;
    font-size: 10px !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .avatar {
    right: 18px !important;
    width: 60px !important;
    height: 60px !important;
    transform: translateY(-32%) !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .avatar-initial .ti,
html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .avatar-initial .ti::before {
    font-size: 52px !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-0 {
    left: 18px !important;
    bottom: 16px !important;
    height: 9px !important;
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] .card-body > .mb-0::before {
    top: 1px !important;
    height: 6px !important;
}

/* Reference-inspired application shell (visual only). */
html:not(.customizer-hide) body {
    color: #22314d;
    background: #eef3f9;
}

html:not(.customizer-hide) .layout-menu {
    border-right: 0;
    color: #e9efff;
    background:
        radial-gradient(circle at 35% 8%, rgba(77, 111, 190, 0.2), transparent 28%),
        linear-gradient(180deg, #172542 0%, #101d37 100%) !important;
    box-shadow: 5px 0 22px rgba(22, 38, 71, 0.12);
}

html:not(.customizer-hide) .layout-menu .app-brand {
    height: 160px;
    padding: 18px 18px 8px;
    align-items: center;
}

html:not(.customizer-hide) .layout-menu .app-brand-link {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

html:not(.customizer-hide) .layout-menu .app-brand-link img {
    width: 82px;
    height: 82px !important;
    margin: 0;
    filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.28));
}

html:not(.customizer-hide) .layout-menu .app-brand-text {
    color: #fff;
    font-size: 18px;
    text-align: center;
    white-space: normal;
}

html:not(.customizer-hide) .layout-menu .sidebar-profile {
    display: flex;
    height: 28px;
    min-height: 28px;
    margin: 0 18px 10px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
}

html:not(.customizer-hide) .layout-menu .sidebar-profile img {
    display: none;
}

html:not(.customizer-hide) .layout-menu .sidebar-profile strong {
    color: #b9c8e8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

html:not(.customizer-hide) .layout-menu .menu-inner {
    padding: 8px 10px 20px !important;
}

html:not(.customizer-hide) .layout-menu .menu-item {
    margin: 4px 0;
}

html:not(.customizer-hide) .layout-menu .menu-link {
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #dbe5fb;
    font-size: 14px;
}

html:not(.customizer-hide) .layout-menu .menu-icon,
html:not(.customizer-hide) .layout-menu .menu-sub .menu-icon {
    color: #b9caee;
}

html:not(.customizer-hide) .layout-menu .menu-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

html:not(.customizer-hide) .layout-menu .menu-item.active > .menu-link {
    color: #fff;
    background: linear-gradient(110deg, #2765f6 0%, #8149f7 100%);
    box-shadow: 0 8px 18px rgba(63, 83, 241, 0.32);
}

html:not(.customizer-hide) .layout-menu .menu-sub {
    background: transparent;
}

html:not(.customizer-hide) .layout-menu .menu-sub .menu-link {
    color: #c8d5f0;
}

html:not(.customizer-hide) #layout-navbar {
    min-height: 62px;
    margin: 0;
    padding: 0 20px;
    border-bottom: 1px solid #dce4ef;
    color: #172542;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 3px 14px rgba(31, 49, 80, 0.07);
    backdrop-filter: blur(10px);
}

html:not(.customizer-hide) #layout-navbar .nav-link,
html:not(.customizer-hide) #layout-navbar .ti {
    color: #172542;
}

html:not(.customizer-hide) #layout-navbar .app-header-action {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

html:not(.customizer-hide) #layout-navbar .app-header-action:hover {
    color: #2854dc;
    background: #edf3ff;
}

html:not(.customizer-hide) #layout-navbar .avatar img {
    border-color: #d7dfeb;
}

body:has(.card-border-shadow-primary) #layout-navbar::after {
    color: #172542;
    font-size: 18px;
}

html:not(.customizer-hide) .content-wrapper {
    background:
        radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.05), transparent 24%),
        #eef3f9;
}

html:not(.customizer-hide) .content-wrapper > .container-xxl {
    padding-right: 18px;
    padding-left: 18px;
}

.ociu-filter-card,
.dashboard-journey-card > .card,
.dashboard-station-age-card > .card,
.pending-message-table {
    border: 1px solid #dce4ef !important;
    border-radius: 13px !important;
    box-shadow: 0 5px 16px rgba(33, 52, 84, 0.07) !important;
}

.ociu-filter-card {
    background: rgba(255, 255, 255, 0.96);
}

.ociu-filter-field label {
    color: #243653;
    font-size: 11px;
    font-weight: 700;
}

.ociu-filter-field .form-select,
.ociu-filter-field .form-control {
    border-color: #d7e0ed;
    background-color: #fbfcfe;
}

.ociu-filter-field .form-select:focus,
.ociu-filter-field .form-control:focus {
    border-color: #4f74e8;
    box-shadow: 0 0 0 3px rgba(79, 116, 232, 0.12);
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) .card-border-shadow-primary {
    background: linear-gradient(125deg, #7c3ff2 0%, #a422ef 100%);
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) .card-border-shadow-success {
    background: linear-gradient(125deg, #17a968 0%, #24bf75 100%);
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) .card-border-shadow-danger {
    background: linear-gradient(125deg, #ff8c25 0%, #ff541d 100%);
}

html:not(.customizer-hide) body:has(.dashboard-journey-card) [class*="card-border-shadow-"] {
    box-shadow: 0 9px 20px rgba(31, 48, 83, 0.14) !important;
}

.dashboard-journey-card > .card > .card-header,
.dashboard-station-age-card .card-header {
    color: #14264a;
    background: #fff;
}

.dashboard-journey-card > .card > .card-header::before {
    margin-right: 9px;
    color: #2d62df;
    font-family: "tabler-icons";
    content: "\ee9e";
}

.dashboard-approval-grid {
    border-color: #dfe6f0;
    box-shadow: inset 0 1px 0 #fff;
}

.dashboard-approval-corner,
.dashboard-approval-stage {
    color: #253858;
    background: linear-gradient(180deg, #f8fafe, #f1f5fa);
}

.dashboard-approval-direction {
    color: #2f4365;
    background: #f8fafd;
}

.dashboard-approval-value button {
    color: #1655e6;
}

.dashboard-station-age-card .card-header h5 {
    color: #14264a;
}

.station-age-table th {
    color: #405374;
    background: #f4f7fb;
}

.station-age-table tbody tr:hover {
    background: #f3f7ff;
}

.station-age-table th:last-child,
.station-age-table td:last-child {
    color: #dc2626;
    background: #fff1f2;
    font-weight: 700;
}

.station-age-table td:last-child .station-age-count {
    color: #dc2626;
}

.station-age-table th:first-child,
.station-age-table td:first-child {
    padding-left: 18px;
}

.station-age-count {
    color: #1655e6;
}

.content-footer,
.content-footer .text-body {
    color: #7b879b !important;
}

@media (max-width: 1199.98px) {
    html:not(.customizer-hide) .layout-menu .app-brand {
        height: 135px;
    }

    html:not(.customizer-hide) .layout-menu .app-brand-link img {
        width: 66px;
        height: 66px !important;
    }
}

/* Final dashboard state corrections. These selectors intentionally outrank the
   later fidelity layer while keeping every change visual-only. */
body:has(.dashboard-welcome-banner) .dashboard-welcome-banner {
    background-image:
        linear-gradient(90deg, rgba(8, 30, 67, 0.96) 0%, rgba(8, 30, 67, 0.42) 54%, rgba(8, 30, 67, 0.18) 100%),
        url('../img/ociu/dashboard-hero-wide.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut::before {
    z-index: 0 !important;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut > div {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 2 !important;
    width: 74% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut > div > strong {
    display: block;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 20px !important;
}

body:has(.dashboard-welcome-banner) .dashboard-status-donut > div > span {
    display: block;
    width: 100%;
    margin: 3px 0 0 !important;
    overflow: visible;
    font-size: 7px !important;
    line-height: 9px !important;
    letter-spacing: -0.15px;
    text-align: center;
    white-space: nowrap !important;
}

@media (min-width: 1200px) {
    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-page {
        padding-left: 70px !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .app-brand,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand {
        width: 70px !important;
        height: 70px !important;
        min-height: 70px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .app-brand-link,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-link {
        width: 70px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .app-brand-link > img,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-link > img {
        display: block !important;
        width: 45px !important;
        height: 45px !important;
        object-fit: contain !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .app-brand-text,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-text,
    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .sidebar-profile,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-profile {
        display: none !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-inner,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner {
        width: 70px !important;
        padding: 8px 0 20px !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-inner > .menu-item,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item {
        width: 70px !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link {
        width: 46px !important;
        min-width: 46px !important;
        margin: 4px auto !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link > div,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link > div,
    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-toggle::after,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-toggle::after,
    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-sub,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-sub {
        display: none !important;
    }

    html.layout-menu-collapsed:not(.customizer-hide) .layout-menu .menu-icon,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-icon {
        margin: 0 !important;
    }

    /* A collapsed menu temporarily opens over the page only while it is hovered. */
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu {
        width: 236px !important;
        min-width: 236px !important;
        max-width: 236px !important;
        box-shadow: 8px 0 24px rgba(5, 17, 39, 0.28) !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand {
        width: 236px !important;
        height: 137px !important;
        min-height: 137px !important;
        padding: 12px 14px 2px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-link {
        width: auto !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-link > img {
        width: 105px !important;
        height: 82px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .app-brand-text {
        display: block !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
        transform: none !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-profile {
        display: flex !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 12px 12px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner {
        width: 236px !important;
        padding: 6px 10px 150px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item {
        width: 100% !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link {
        width: auto !important;
        min-width: 0 !important;
        margin: 4px 0 !important;
        padding: 10px 14px !important;
        justify-content: flex-start !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-inner > .menu-item > .menu-link > div,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-toggle::after,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-item.open > .menu-sub,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-help-card,
    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-user-card {
        display: flex !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-icon {
        margin-right: 10px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-sub {
        width: auto !important;
        padding-left: 36px !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-sub .menu-link {
        width: auto !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .sidebar-user-card {
        display: grid !important;
    }

    html.layout-menu-collapsed.layout-menu-hover:not(.customizer-hide) .layout-menu .menu-item.open > .menu-sub {
        display: block !important;
    }
}

     /* ==========================================
           GLOBAL
        ========================================== */

        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --navy: #142d59;
            --text: #19253d;
            --muted: #71809a;
            --border: #dce5f3;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
            width: 100%;
        }

        body {
            font-family: "Public Sans", Arial, sans-serif;
            background: #edf3ff;
            color: var(--text);
        }

        /* ==========================================
           MAIN LOGIN LAYOUT
        ========================================== */

        .ociu-login-page {
            position: relative;
            display: grid;
            grid-template-columns: 48% 52%;
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            overflow: hidden;
            isolation: isolate;
        }

        /* ==========================================
           LEFT BRAND SECTION
        ========================================== */

        .ociu-brand-panel {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 65px 55px;
            overflow: hidden;
            isolation: isolate;

            /*
              Replace the image URL below with your
              existing building background image path.
            */

            background-image:
                linear-gradient(
                    180deg,
                    rgba(8, 27, 65, 0.84) 0%,
                    rgba(14, 39, 87, 0.72) 46%,
                    rgba(12, 30, 69, 0.35) 100%
                ),
                url("../img/ociu/login-portal-background.png");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .ociu-brand-panel::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            background: rgba(255, 255, 255, 0.55);
            z-index: 1;
        }

        .ociu-brand-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 520px;
            text-align: center;
            color: #ffffff;
        }

        .ociu-brand-logo {
            display: block;
            width: 148px;
            height: 148px;
            object-fit: contain;
            margin: 0 auto 27px;
            filter: drop-shadow(
                0 6px 14px rgba(0, 0, 0, 0.16)
            );
        }

        .ociu-brand-department {
            margin: 0 0 13px;
            color: #e8efff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 2.8px;
            line-height: 1.5;
            text-transform: uppercase;
        }

        .ociu-brand-title {
            margin: 0;
            color: #ffffff;
            font-size: clamp(28px, 2.65vw, 42px);
            font-weight: 800;
            line-height: 1.22;
            letter-spacing: -0.8px;
            text-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
        }

        .ociu-brand-line {
            width: 58px;
            height: 4px;
            margin-top: 25px;
            border-radius: 20px;
            background: #f4c75a;
        }

        /* ==========================================
           RIGHT BACKGROUND
        ========================================== */

        .ociu-form-panel {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 35px 42px;
            overflow: hidden;
            isolation: isolate;
            background: #f5f8ff;
        }

        /*
           Background image is intentionally very light.
           Change opacity from 0.10 to 0.15 if needed.
        */

        .ociu-form-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;

            background-image:
                url("../img/ociu/login-portal-background.png");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            opacity: 0.10;
            pointer-events: none;
        }

        .ociu-form-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;

            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.86),
                    rgba(237, 244, 255, 0.78)
                );

            pointer-events: none;
        }

        /* ==========================================
           LOGIN CARD
        ========================================== */

        .ociu-login-card {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 460px;
            margin: auto;
            padding: 35px 43px 30px;
            border: 1px solid rgba(222, 231, 246, 0.75);
            border-radius: 24px;

            background: rgba(255, 255, 255, 0.98);

            box-shadow:
                0 20px 65px rgba(33, 65, 125, 0.09),
                0 3px 12px rgba(33, 65, 125, 0.025);
        }

        /* ==========================================
           CARD HEADER
        ========================================== */

        .ociu-login-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 27px;
        }

        .ociu-login-logo {
            display: block;
            width: 115px;
            height: 115px;
            margin-bottom: 18px;
            object-fit: contain;
        }

        .ociu-login-title {
            margin: 0 0 6px;
            color: #19243b;
            font-size: 31px;
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -0.6px;
        }

        .ociu-login-subtitle {
            margin: 0;
            color: #71809a;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.6;
        }

        .ociu-login-subtitle strong {
            color: #425574;
            font-weight: 600;
        }

        /* ==========================================
           ALERT
        ========================================== */

        .ociu-alert-container {
            margin-bottom: 20px;
        }

        .ociu-alert-container:empty {
            display: none;
        }

        .ociu-alert-container .alert {
            margin: 0;
            padding: 12px 35px 12px 14px;
            border-radius: 9px;
            font-size: 12px;
            line-height: 1.5;
        }

        /* ==========================================
           FORM
        ========================================== */

        .ociu-form-group {
            margin-bottom: 19px;
        }

        .ociu-form-label {
            display: block;
            margin-bottom: 8px;
            color: #34435d;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
        }

        .ociu-required {
            color: #e5484d;
        }

        .ociu-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .ociu-input-icon {
            position: absolute;
            left: 15px;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 19px;
            height: 19px;
            color: #8494b0;
            pointer-events: none;
        }

        .ociu-input-icon svg {
            width: 19px;
            height: 19px;
            stroke: currentColor;
        }

        .ociu-form-control {
            display: block;
            width: 100%;
            height: 49px;
            min-height: 49px;
            padding: 0 42px 0 44px;
            border: 1px solid var(--border);
            border-radius: 9px;
            outline: none;
            background: #f7faff;
            color: #26354e;
            font-family: inherit;
            font-size: 13px;
            font-weight: 500;
            line-height: normal;
            box-shadow: none;
            transition:
                border-color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .ociu-form-control::placeholder {
            color: #9aa8bd;
            font-weight: 400;
        }

        .ociu-form-control:focus {
            outline: none;
            border-color: #5488f5;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
        }

        .ociu-select {
            appearance: auto;
            -webkit-appearance: auto;
            cursor: pointer;
            padding-right: 13px;
        }

        .ociu-password-input {
            padding-right: 49px;
        }

        /* ==========================================
           PASSWORD TOGGLE
        ========================================== */

        .ociu-password-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            padding: 0;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #8191ac;
            cursor: pointer;
            transform: translateY(-50%);
        }

        .ociu-password-toggle:hover {
            background: #eaf0fc;
            color: var(--primary);
        }

        .ociu-password-toggle svg {
            width: 19px;
            height: 19px;
            stroke: currentColor;
        }

        /* ==========================================
           REMEMBER / FORGOT PASSWORD
        ========================================== */

        .ociu-form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 20px 0 21px;
        }

        .ociu-remember {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin: 0;
            color: #43516a;
            font-size: 12px;
            font-weight: 400;
            cursor: pointer;
        }

        .ociu-remember input {
            width: 16px;
            height: 16px;
            margin: 0;
            border: 1px solid #b9c8df;
            border-radius: 4px;
            accent-color: var(--primary);
            cursor: pointer;
        }

        .ociu-forgot-link {
            color: #2563eb;
            font-size: 12px;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;
        }

        .ociu-forgot-link:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

        /* ==========================================
           LOGIN BUTTON
        ========================================== */

        .ociu-login-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            height: 51px;
            padding: 0 16px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(
                105deg,
                #2478ee 0%,
                #3344e9 100%
            );
            color: #ffffff;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;

            box-shadow:
                0 6px 14px rgba(37, 99, 235, 0.14);

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                filter 0.2s ease;
        }

        .ociu-login-button:hover {
            color: #ffffff;
            filter: brightness(1.06);
            box-shadow:
                0 8px 18px rgba(37, 99, 235, 0.22);
            transform: translateY(-1px);
        }

        .ociu-login-button:active {
            transform: translateY(0);
        }

        .ociu-login-button svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
        }

        /* ==========================================
           RESPONSIVE - SMALL DESKTOP
        ========================================== */

        @media (max-width: 1100px) {

            .ociu-login-page {
                grid-template-columns: 45% 55%;
            }

            .ociu-brand-panel {
                padding: 45px 30px;
            }

            .ociu-brand-title {
                font-size: 30px;
            }

            .ociu-form-panel {
                padding: 30px 25px;
            }

            .ociu-login-card {
                padding: 32px 30px;
            }

        }

        /* ==========================================
           RESPONSIVE - TABLET / MOBILE
        ========================================== */

        @media (max-width: 767px) {

            .ociu-login-page {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
                min-height: 100dvh;
                overflow: visible;
            }

            .ociu-brand-panel {
                min-height: auto;
                padding: 27px 20px 32px;
                background-position: center 55%;
            }

            .ociu-brand-panel::after {
                top: auto;
                bottom: 0;
                width: 100%;
                height: 2px;
            }

            .ociu-brand-content {
                max-width: 100%;
            }

            .ociu-brand-logo {
                width: 75px;
                height: 75px;
                margin-bottom: 10px;
            }

            .ociu-brand-department {
                margin-bottom: 5px;
                font-size: 10px;
                letter-spacing: 1.7px;
            }

            .ociu-brand-title {
                font-size: 23px;
                letter-spacing: -0.4px;
            }

            .ociu-brand-line {
                width: 42px;
                height: 3px;
                margin-top: 13px;
            }

            .ociu-form-panel {
                flex: 1;
                min-height: auto;
                padding: 22px 16px 30px;
            }

            .ociu-login-card {
                max-width: 460px;
                padding: 25px 24px 27px;
                border-radius: 17px;
            }

            .ociu-login-header {
                margin-bottom: 22px;
            }

            .ociu-login-logo {
                width: 85px;
                height: 85px;
                margin-bottom: 10px;
            }

            .ociu-login-title {
                font-size: 27px;
            }

            .ociu-login-subtitle {
                font-size: 12px;
            }

            .ociu-form-group {
                margin-bottom: 16px;
            }

        }

        /* ==========================================
           RESPONSIVE - SMALL MOBILE
        ========================================== */

        @media (max-width: 380px) {

            .ociu-form-panel {
                padding: 15px 10px 25px;
            }

            .ociu-login-card {
                padding: 22px 17px;
            }

            .ociu-brand-title {
                font-size: 21px;
            }

            .ociu-form-options {
                gap: 8px;
            }

            .ociu-remember,
            .ociu-forgot-link {
                font-size: 11px;
            }

        }

        /* ==========================================
           SHORT DESKTOP SCREENS
        ========================================== */

        @media (min-width: 768px) and (max-height: 720px) {

            .ociu-form-panel {
                padding-top: 15px;
                padding-bottom: 15px;
            }

            .ociu-login-card {
                padding-top: 23px;
                padding-bottom: 22px;
            }

            .ociu-login-logo {
                width: 88px;
                height: 88px;
                margin-bottom: 9px;
            }

            .ociu-login-header {
                margin-bottom: 17px;
            }

            .ociu-form-group {
                margin-bottom: 13px;
            }

            .ociu-form-options {
                margin-top: 14px;
                margin-bottom: 15px;
            }

        }