html.login-page,
body.login-page {
    height: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: #000;
}

body.login-page .login-shell {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 9rem;
    box-sizing: border-box;
    overflow: hidden;
}

body.login-page .login-bg {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-image: url("../images/login-bg.png");
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

body.login-page .login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 25.5rem;
    background: #1c1c1c;
    border-radius: 1rem;
    padding: 2.65rem 2.25rem 1.75rem;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.login-page .ebonds-logo-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 2rem;
}

body.login-page .ebonds-logo {
    display: block;
    height: 3.5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Logo asset has a black plate; blend it into the card */
    mix-blend-mode: screen;
    user-select: none;
}

body.login-page .login-alert {
    margin-bottom: 1rem;
}

body.login-page .login-form {
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
}

body.login-page .login-form .form-group {
    margin-bottom: 1.05rem;
}

body.login-page .login-field {
    position: relative;
}

body.login-page form.user .form-control-user,
body.login-page .login-form .form-control,
body.login-page .login-form #username,
body.login-page .login-form #password {
    height: 3.1rem;
    font-size: 1rem;
    color: #1a1a1a;
    background: #fff;
    border: none;
    border-radius: 0.45rem;
    padding: 0.85rem 1rem;
}

body.login-page .login-field-label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

body.login-page .login-req {
    color: #e53935;
    margin-left: 0.05em;
}

body.login-page .login-field .form-control:not(:placeholder-shown) + .login-field-label,
body.login-page .login-field .form-control:focus + .login-field-label {
    opacity: 0;
}

body.login-page .login-form .form-control:focus {
    box-shadow: 0 0 0 0.15rem rgba(255, 204, 0, 0.35);
}

body.login-page .login-form .is-invalid ~ .invalid-feedback,
body.login-page .login-form .invalid-feedback {
    display: block;
    color: #ffb4b4;
}

body.login-page .password-field #password {
    padding-right: 3rem;
}

body.login-page .password-field #password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
    color: #9ca3af;
    z-index: 2;
}

body.login-page .password-field #password-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #9ca3af;
}

body.login-page form.user .btn-user,
body.login-page .btn-user {
    background-color: #ffcc00;
    color: #141414;
    border: none;
    border-radius: 0.45rem;
    padding: 0.8rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: 0.25rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

body.login-page .btn-user:hover,
body.login-page .btn-user:focus {
    background-color: #f0be00;
    color: #141414;
    outline: none;
}

body.login-page .btn-user:active {
    transform: translateY(1px);
}

body.login-page .login-form .btn-user .spinner-border {
    flex-shrink: 0;
}

body.login-page .login-legal {
    margin: 1.2rem 0 1.7rem;
    text-align: center;
    color: #e8e8e8;
    font-size: 0.76rem;
    line-height: 1.45;
}

body.login-page .login-legal a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

body.login-page .login-legal a:hover {
    color: #ffcc00;
}

body.login-page .maagap-logo-wrap {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-bottom: 0.1rem;
}

body.login-page .maagap-logo {
    height: 2.55rem;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    mix-blend-mode: screen;
}

@media (max-width: 575.98px) {
    body.login-page .login-shell {
        padding: 1.5rem 1rem 5.5rem;
        align-items: flex-start;
        padding-top: 2.5rem;
    }

    body.login-page .login-card {
        padding: 2rem 1.35rem 1.35rem;
        border-radius: 0.9rem;
    }

    body.login-page .ebonds-logo {
        height: 2.85rem;
    }

    body.login-page .maagap-logo {
        height: 2.15rem;
    }
}

@media (min-width: 992px) {
    body.login-page .login-shell {
        justify-content: flex-start;
        padding-left: clamp(4rem, 14vw, 11rem);
        padding-right: 2rem;
        padding-bottom: 11rem;
    }

    body.login-page .login-bg {
        background-position: right center;
    }
}

body {
    font-size: 0.8rem;
    
}
.form-control {
    font-size: 0.8rem;
    
}
/* label {
    color: black;
} */

:root {
    --eb-yellow: #ffcc00;
    --eb-gray: #5B5959;
    --eb-white: #fff;
    --eb-gray-light: rgba(91, 89, 89, 0.12);
    --eb-gray-divider: rgba(0, 0, 0, 0.2);
}

/* sidebar */
.ebonds-sidebar {
    --sidebar-ink: #1f2937;
    --sidebar-muted: #6b7280;
    --sidebar-bg: #f8f9fb;
    --sidebar-active: #fff8e1;
    background: #fff !important;
    color: var(--sidebar-ink);
    border-right: 1px solid #e5e7eb;
    box-shadow: 0.15rem 0 1rem rgba(31, 41, 55, 0.05);
}

.ebonds-sidebar__brand-shell {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.ebonds-sidebar .sidebar-brand.ebonds-sidebar__brand {
    width: 100%;
    height: auto;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #fff !important;
    text-decoration: none;
    text-transform: none;
}

.ebonds-sidebar .sidebar-brand-icon {
    flex: 0 0 auto;
}

.ebonds-sidebar .sidebar-brand-icon img {
    height: 2.75rem;
    width: auto;
    display: block;
}

.ebonds-sidebar .sidebar-brand-text {
    min-width: 0;
    margin: 0 !important;
    color: var(--sidebar-ink);
    line-height: 1.15;
    text-align: left;
}

.ebonds-sidebar .sidebar-brand-text strong,
.ebonds-sidebar .sidebar-brand-text small {
    display: block;
}

.ebonds-sidebar .sidebar-brand-text strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebonds-sidebar .sidebar-brand-text small {
    margin-top: 0.2rem;
    color: var(--sidebar-muted);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

.ebonds-sidebar .sidebar-divider {
    border-top: 1px solid #e5e7eb;
}

.ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link {
    width: auto;
    min-height: 3rem;
    display: flex;
    align-items: center;
    margin: 0.15rem 0.45rem;
    padding: 0.7rem 0.85rem;
    border-left: 4px solid transparent;
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--sidebar-ink);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link i {
    width: 1.3rem;
    margin-right: 0.65rem;
    color: var(--sidebar-muted);
    font-size: 0.95rem;
    text-align: center;
}

/* sb-admin shrinks nav labels to 0.65rem; restore a readable size. */
.ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link span {
    display: inline;
    font-size: 0.82rem;
}

.ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link:hover,
.ebonds-sidebar .nav-item.active .nav-link.ebonds-sidebar__link {
    background: var(--sidebar-active);
    color: var(--sidebar-ink);
    border-left-color: var(--eb-yellow);
}

.ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link:hover i,
.ebonds-sidebar .nav-item.active .nav-link.ebonds-sidebar__link i {
    color: #d9a900;
}

.ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link[data-toggle="collapse"]::after {
    margin-left: auto;
    color: var(--sidebar-muted);
    font-size: 0.7rem;
}

.ebonds-sidebar .nav-item .collapse,
.ebonds-sidebar .nav-item .collapsing {
    margin: 0;
}

.sidebar-submenu {
    margin: 0 0.7rem 0.35rem;
    padding: 0.2rem 0 0.35rem 2.6rem;
    border-radius: 0.45rem;
    background: var(--sidebar-bg);
    overflow: hidden;
}

.sidebar-submenu__item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.65rem 0.4rem 0.8rem;
    border: 0;
    color: var(--sidebar-muted);
    text-decoration: none;
    text-align: left;
    font-size: 0.74rem;
    line-height: 1.25;
}

.sidebar-submenu__item::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--eb-yellow);
}

.sidebar-submenu__item:hover,
.sidebar-submenu__item.is-active {
    background: #fff;
    color: var(--sidebar-ink);
    text-decoration: none;
}

.sidebar-submenu__item.is-active {
    font-weight: 700;
}

.ebonds-sidebar .nav-item .collapse .collapse-inner,
.ebonds-sidebar .nav-item .collapsing .collapse-inner {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.ebonds-sidebar.toggled .nav-item .collapse {
    z-index: 1050;
}

.ebonds-sidebar.toggled .nav-item .collapse .sidebar-submenu,
.sidebar.toggled .nav-item .collapse .sidebar-submenu {
    min-width: 13rem;
    padding: 0.4rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 0.5rem 1.25rem rgba(31, 41, 55, 0.14);
    margin: 0;
}

@media (min-width: 768px) {
    .ebonds-sidebar.sidebar {
        width: 16rem !important;
    }

    .ebonds-sidebar.sidebar.toggled {
        width: 6.5rem !important;
    }

    .ebonds-sidebar.toggled .ebonds-sidebar__brand-shell {
        min-height: 5rem;
    }

    .ebonds-sidebar.toggled .sidebar-brand.ebonds-sidebar__brand {
        min-height: 5rem;
        justify-content: center;
        padding: 0.75rem 0.35rem;
    }

    .ebonds-sidebar.toggled .sidebar-brand-text {
        display: none;
    }

    /* Icon-only rail: hide the text labels and the accordion caret. */
    .ebonds-sidebar.sidebar.toggled .nav-item .nav-link.ebonds-sidebar__link span {
        display: none;
    }

    .ebonds-sidebar.sidebar.toggled .nav-item .nav-link.ebonds-sidebar__link[data-toggle="collapse"]::after {
        display: none;
    }

    .ebonds-sidebar.toggled .nav-item .nav-link.ebonds-sidebar__link {
        width: 3.5rem;
        height: 3.2rem;
        min-height: 3.2rem;
        justify-content: center;
        margin: 0.2rem auto;
        padding: 0.65rem;
        border-left-width: 3px;
        border-radius: 0.5rem;
    }

    .ebonds-sidebar.toggled .nav-item .nav-link.ebonds-sidebar__link i {
        margin: 0;
        font-size: 1rem;
    }
}

.ebonds-sidebar__backdrop {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ebonds-sidebar.sidebar {
        width: 14rem !important;
    }
}

@media (max-width: 767.98px) {
    .ebonds-sidebar.sidebar {
        z-index: 1040 !important;
        width: min(16rem, 86vw) !important;
        max-width: 16rem;
        transform: translateX(0);
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transition: transform 0.22s ease;
    }

    .ebonds-sidebar.sidebar.toggled {
        width: min(16rem, 86vw) !important;
        transform: translateX(-105%);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .ebonds-sidebar .sidebar-brand.ebonds-sidebar__brand {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }

    .ebonds-sidebar .sidebar-brand-text {
        display: block;
    }

    .ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link {
        width: auto;
        min-height: 2.85rem;
        margin: 0.12rem 0.45rem;
        padding: 0.65rem 0.8rem;
        text-align: left;
    }

    .ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link span {
        display: inline;
        font-size: 0.8rem;
    }

    .ebonds-sidebar .nav-item .nav-link.ebonds-sidebar__link i {
        margin-right: 0.65rem;
    }

    .ebonds-sidebar .nav-item .collapse,
    .ebonds-sidebar .nav-item .collapsing {
        position: static;
        left: auto;
        top: auto;
        width: auto;
    }

    .ebonds-sidebar__backdrop {
        position: fixed;
        inset: 0;
        z-index: 1035;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(31, 41, 55, 0.35);
        cursor: default;
    }

    body:not(.sidebar-toggled) .ebonds-sidebar__backdrop {
        display: block;
    }
}

/* topbar */
.ebonds-topbar.navbar,
.topbar.navbar.ebonds-topbar {
    min-height: 5rem;
    height: 5rem;
    padding: 0.65rem 1.25rem;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 0.1rem 0.45rem rgba(31, 41, 55, 0.04) !important;
}

.ebonds-topbar__left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.ebonds-topbar__menu-btn {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
}

.ebonds-topbar__menu-btn:hover,
.ebonds-topbar__menu-btn:focus {
    outline: none;
    background: #fff8e1;
    border-color: #ffcc00;
    color: #1f2937;
}

.ebonds-topbar__context {
    min-width: 0;
    line-height: 1.15;
}

.ebonds-topbar__context strong,
.ebonds-topbar__context small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebonds-topbar__context strong {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 800;
}

.ebonds-topbar__context small {
    margin-top: 0.25rem;
    color: #6b7280;
    font-size: 0.7rem;
}

.ebonds-topbar__search {
    position: relative;
    width: min(25rem, 34vw);
    margin-left: auto;
}

.ebonds-topbar__search > i {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.78rem;
    pointer-events: none;
}

.ebonds-topbar__search input {
    width: 100%;
    height: 2.45rem;
    padding: 0 0.9rem 0 2.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.55rem;
    background: #f8f9fb;
    color: #1f2937;
    font-size: 0.78rem;
}

.ebonds-topbar__search input:focus {
    outline: none;
    border-color: #ffcc00;
    background: #fff;
    box-shadow: 0 0 0 0.15rem rgba(255, 204, 0, 0.13);
}

.ebonds-topbar__right {
    flex: 0 0 auto;
    align-items: center;
    margin-left: 0 !important;
}

.ebonds-topbar__date {
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.7rem;
    color: #6b7280;
    font-size: 0.75rem;
}

.ebonds-topbar .nav-item .nav-link {
    color: #6b7280;
}

.ebonds-topbar .nav-item .nav-link:hover,
.ebonds-topbar .nav-item .nav-link:focus {
    color: #1f2937;
}

.ebonds-topbar .topbar-divider {
    border-right-color: #e5e7eb;
}

.ebonds-topbar__notifications .fa-bell {
    color: #6b7280;
    font-size: 1rem;
}

.ebonds-topbar__notifications .badge-counter {
    position: absolute;
    top: 0.55rem;
    right: 0.15rem;
    min-width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ffcc00 !important;
    color: #1f2937 !important;
    font-size: 0.58rem;
    font-weight: 800;
}

.ebonds-topbar__notifications-menu {
    width: 28rem !important;
    min-width: 28rem;
    max-width: min(28rem, calc(100vw - 1.5rem));
    min-height: 50vh;
    max-height: 50vh;
    overflow: hidden;
}

.ebonds-topbar__notifications-menu.show {
    display: flex;
    flex-direction: column;
}

.ebonds-topbar__notifications-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.ebonds-topbar .dropdown-list .dropdown-header {
    background-color: var(--eb-gray);
    border-color: var(--eb-gray);
    color: var(--eb-white);
}

.ebonds-topbar__icon-circle {
    background-color: var(--eb-yellow);
    color: var(--eb-gray);
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ebonds-topbar__dropdown-meta {
    color: var(--eb-gray);
    opacity: 0.75;
}

.ebonds-notif-row {
    border: 0;
    background: transparent;
    width: 100%;
    cursor: default;
    white-space: normal;
    min-height: 4.5rem;
}

.ebonds-notif-row--unread .ebonds-notif-item {
    font-weight: 700;
}

.ebonds-notif-item {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ebonds-notif-item:focus {
    outline: none;
    box-shadow: none;
}

.ebonds-notif-actions-toggle {
    color: var(--eb-gray);
    line-height: 1;
}

.ebonds-notif-actions-toggle:hover,
.ebonds-notif-actions-toggle:focus {
    color: var(--eb-gray);
    text-decoration: none;
}

.ebonds-notif-actions {
    position: relative;
}

.ebonds-notif-actions-menu {
    min-width: 9rem;
    position: absolute;
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%);
    margin-right: 0.25rem;
    z-index: 1050;
}

.ebonds-notif-actions-menu.show {
    display: block;
}

.ebonds-notif-row:hover,
.ebonds-notif-row:focus-within {
    background-color: rgba(255, 204, 0, 0.15);
    color: var(--eb-gray);
}

.ebonds-topbar__notifications-menu .dropdown-header .btn-link:hover,
.ebonds-topbar__notifications-menu .dropdown-header .btn-link:focus {
    text-decoration: underline;
    color: var(--eb-white);
}

.ebonds-topbar .dropdown-item:hover,
.ebonds-topbar .dropdown-item:focus {
    background-color: rgba(255, 204, 0, 0.15);
    color: var(--eb-gray);
}

.ebonds-topbar__identity {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.15;
    text-align: left;
    vertical-align: middle;
}

.ebonds-topbar__username {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    color: #1f2937;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebonds-topbar__role {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    color: #6b7280;
    font-size: 0.64rem;
    font-weight: 500;
    padding-top: 0.15rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebonds-topbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #ffe27a;
    border-radius: 0.55rem;
    background: #fff8e1;
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 800;
}

.ebonds-topbar__user .nav-link {
    min-width: 0;
    display: flex;
    align-items: center;
    padding-left: 0.55rem !important;
    padding-right: 0.35rem !important;
}

.ebonds-topbar__user-caret {
    margin-left: 0.5rem;
    color: #9ca3af;
    font-size: 0.58rem;
}

.ebonds-topbar__user-menu {
    border: 1px solid var(--eb-gray-light);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

.ebonds-topbar__user-menu .dropdown-item {
    color: #374151;
    font-size: 0.8rem;
}

.ebonds-topbar__user-menu .dropdown-item:hover {
    background: #fff8e1;
    color: #1f2937;
}

@media (max-width: 1199.98px) {
    .ebonds-topbar__search {
        width: min(20rem, 30vw);
    }
}

@media (max-width: 991.98px) {
    .ebonds-topbar__search {
        display: none;
    }

    .ebonds-topbar__right {
        margin-left: auto;
    }
}

@media (max-width: 575.98px) {
    .ebonds-topbar.navbar,
    .topbar.navbar.ebonds-topbar {
        min-height: 4.375rem;
        height: 4.375rem;
        padding: 0.55rem 0.75rem;
        gap: 0.35rem;
    }

    .ebonds-topbar__context small {
        display: none;
    }

    .ebonds-topbar__context strong {
        max-width: 10rem;
        font-size: 0.82rem;
    }
}

/* fixed shell — sidebar + topbar stay in place while page scrolls */
html {
    height: auto;
    min-height: 100%;
}

body.fixed-nav {
    --eb-shell-sidebar: 6.5rem;
    --eb-shell-topbar: 5rem;
    height: auto;
    min-height: 100%;
}

@media (min-width: 768px) {
    body.fixed-nav {
        --eb-shell-sidebar: 16rem;
    }

    body.fixed-nav.sidebar-toggled {
        --eb-shell-sidebar: 6.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.fixed-nav {
        --eb-shell-sidebar: 14rem;
    }

    body.fixed-nav.sidebar-toggled {
        --eb-shell-sidebar: 6.5rem;
    }
}

@media (max-width: 767.98px) {
    body.fixed-nav,
    body.fixed-nav.sidebar-toggled {
        --eb-shell-sidebar: 0;
    }
}

@media (max-width: 575.98px) {
    body.fixed-nav {
        --eb-shell-topbar: 4.375rem;
    }
}

body.fixed-nav .ebonds-sidebar.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    height: 100vh;
    max-height: 100vh;
    flex: 0 0 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body.fixed-nav .ebonds-sidebar.sidebar.toggled {
    overflow: visible;
}

@media (max-width: 767.98px) {
    body.fixed-nav .ebonds-sidebar.sidebar,
    body.fixed-nav .ebonds-sidebar.sidebar.toggled {
        z-index: 1040;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media (min-width: 768px) {
    body.fixed-nav .ebonds-sidebar.sidebar.toggled .nav-item .collapse,
    body.fixed-nav .ebonds-sidebar.sidebar.toggled .nav-item .collapsing {
        position: absolute;
        left: calc(6.5rem + 0.75rem);
        top: 0;
        z-index: 1050;
    }
}

body.fixed-nav #wrapper {
    height: auto;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
}

body.fixed-nav #wrapper #content-wrapper {
    margin-left: var(--eb-shell-sidebar);
    width: calc(100% - var(--eb-shell-sidebar));
    max-width: calc(100% - var(--eb-shell-sidebar));
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    transition: margin-left 0.2s ease, width 0.2s ease, max-width 0.2s ease;
}

body.fixed-nav .ebonds-topbar.topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--eb-shell-sidebar);
    z-index: 1020;
    margin-bottom: 0 !important;
    transition: left 0.2s ease;
}

body.fixed-nav #content {
    padding-top: var(--eb-shell-topbar);
    min-width: 0;
    max-width: 100%;
}

body.fixed-nav #content > .container-fluid {
    margin-top: 1.875em;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* quotations index */
.quotations-index {
    --q-yellow: #ffcc00;
    --q-gray: #5B5959;
    --q-gray-dark: #2f2e2e;
    --q-white: #fff;
    --q-gray-light: rgba(91, 89, 89, 0.12);
    --q-gray-muted: rgba(91, 89, 89, 0.55);
    --q-surface: #f7f7f8;
    --q-thead: #f3f4f6;
    max-width: 100%;
    min-width: 0;
}

.quotations-index__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Bond Status Report page */
.bsr {
    --bsr-border: #e5e7eb;
    --bsr-muted: #6b7280;
    --bsr-ink: #1f2937;
    --bsr-surface: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bsr--page-scroll {
    height: auto;
    max-height: none;
    overflow: visible;
    margin-bottom: 1.5rem;
    min-width: 0;
    width: 100%;
}

.bsr__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bsr__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bsr-ink);
    line-height: 1.2;
}

.bsr__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--bsr-muted);
}

.bsr__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bsr-card {
    background: var(--bsr-surface);
    border: 1px solid var(--bsr-border);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bsr-filters {
    padding: 1rem 1.15rem 1.1rem;
}

.bsr-filters__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.bsr-filters__search-wrap {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}

.bsr-filters__search-wrap > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bsr-muted);
    pointer-events: none;
}

.bsr-filters__search {
    width: 100%;
    height: 2.6rem;
    padding: 0.55rem 0.9rem 0.55rem 2.4rem;
    border: 1px solid var(--bsr-border);
    border-radius: 0.55rem;
    background: #fff;
    color: var(--bsr-ink);
    font-size: 0.9rem;
}

.bsr-filters__search:focus {
    outline: none;
    border-color: #cfcfcf;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
}

.bsr-filters__toggle {
    flex: 0 0 auto;
}

.bsr-filters__panel {
    margin-top: 1rem;
}

.bsr-filters__panel.is-collapsed {
    display: none;
}

.bsr-filters__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.bsr-filters__field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bsr-muted);
}

.bsr-filters__field .form-control {
    height: 2.45rem;
    border-radius: 0.5rem;
    border-color: var(--bsr-border);
    font-size: 0.875rem;
}

.bsr-filters__date {
    position: relative;
}

.bsr-filters__date > i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bsr-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.bsr-filters__date .form-control {
    padding-left: 2.1rem;
}

.bsr-filters__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.55rem;
    margin-top: 1rem;
}

.bsr-filters__grid > .bsr-filters__actions {
    margin-top: 0;
    align-self: end;
}

.bsr-filters__actions--grid-end {
    grid-column: -2 / -1;
    flex-wrap: nowrap;
    justify-self: end;
    width: max-content;
}

.bsr-filters__actions--grid-end > * {
    white-space: nowrap;
}

.bsr-table-card {
    padding: 1rem 1.15rem 1.1rem;
    overflow: visible;
}

.bsr-table-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.bsr-table-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.bsr-table-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.45rem;
    background: #fff8db;
    color: #2f2e2e;
    flex: 0 0 auto;
}

.bsr-table-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bsr-ink);
}

.bsr-table-card__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--bsr-muted);
}

.bsr-table-card__meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.bsr-table-card__count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bsr-muted);
}

.bsr-table-wrap {
    border: 1px solid var(--bsr-border);
    border-radius: 0.65rem;
    overflow-x: auto;
    overflow-y: clip;
    max-width: 100%;
    max-height: none;
    min-width: 0;
    min-height: 0;
    height: auto;
    flex: 0 0 auto;
}

.bsr-table {
    width: max-content;
    min-width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #fff;
}

.bsr-table thead th {
    padding: 0.75rem 0.85rem;
    background: #f9fafb;
    border-bottom: 1px solid var(--bsr-border);
    color: var(--bsr-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.bsr-table tbody td {
    padding: 0.85rem;
    border-bottom: 1px solid #f1f3f5;
    color: var(--bsr-ink);
    font-size: 0.875rem;
    vertical-align: middle;
}

.bsr-table tbody tr:last-child td {
    border-bottom: none;
}

.bsr-table__clamp {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.bsr-status {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.bsr-status.status--pending {
    background-color: #fff4e0;
    color: #d68910;
}

.bsr-status.status--approved {
    background-color: #e6faf3;
    color: #169b6b;
}

.bsr-status.status--issued {
    background-color: #e8f1ff;
    color: #2f6fed;
}

.bsr-status.status--completed {
    background-color: #f1e9ff;
    color: #7c3aed;
}

.bsr-status.status--decline {
    background-color: #fdecea;
    color: #c0392b;
}

.bsr-table__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.bsr-table__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--bsr-border);
    background: #fff;
    color: #4b5563;
    text-decoration: none;
}

.bsr-table__action:hover {
    background: #f9fafb;
    color: #111827;
    text-decoration: none;
}

.bsr-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-top: 0.95rem;
    overflow: visible;
    flex: 0 0 auto;
}

.bsr-footer__per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.bsr-footer__per-page label {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bsr-muted);
}

.bsr-footer__per-page select {
    height: 2.1rem;
    min-width: 4.25rem;
    border: 1px solid var(--bsr-border);
    border-radius: 0.45rem;
    background: #fff;
    padding: 0 0.45rem;
    font-size: 0.85rem;
}

.bsr-footer__count {
    font-size: 0.85rem;
    color: var(--bsr-muted);
}

.bsr-footer__pagination {
    min-width: 0;
    overflow: visible;
}

.bsr-footer__pagination .pagination {
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bsr-footer__pagination .page-link {
    min-width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    margin: 0 0.12rem;
    border-color: var(--bsr-border);
    color: var(--bsr-ink);
    font-size: 0.85rem;
}

.bsr-footer__pagination .page-item.active .page-link {
    background: var(--q-yellow, #ffcc00);
    border-color: var(--q-yellow, #ffcc00);
    color: #1f1e1e;
}

@media (max-width: 1199.98px) {
    .bsr-filters__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bsr-filters__actions--grid-end {
        grid-column: -2 / -1;
    }
}

@media (max-width: 767.98px) {
    .bsr-filters__grid {
        grid-template-columns: 1fr;
    }

    .bsr-filters__actions {
        justify-content: stretch;
    }

    .bsr-filters__actions > * {
        flex: 1 1 auto;
    }

    .bsr-filters__actions--grid-end {
        grid-column: auto;
        flex-wrap: nowrap;
        justify-self: stretch;
        width: 100%;
    }
}

@media print {
    .bsr__header-actions,
    .bsr-filters__toggle,
    .bsr-filters__actions,
    .bsr-table__actions,
    .sidebar,
    .topbar,
    .navbar {
        display: none !important;
    }

    .bsr-card,
    .bsr-table-wrap {
        box-shadow: none;
        border-color: #ddd;
    }
}

.quotations-index__heading {
    min-width: 0;
}

.quotations-index__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quotations-index__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    background-color: var(--q-yellow);
    color: var(--q-gray-dark);
    flex: 0 0 auto;
}

.quotations-index__icon i {
    font-size: 1rem;
}

.quotations-index__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--q-gray-dark);
    margin: 0;
    line-height: 1.2;
}

.quotations-index > .quotations-index__title {
    margin-bottom: 1.25rem;
}

.quotations-index__subtitle {
    margin: 0.35rem 0 0 3rem;
    font-size: 0.875rem;
    color: var(--q-gray-muted);
    line-height: 1.4;
}

.quotations-index__header .btn-quotation-primary {
    flex: 0 0 auto;
    width: auto;
    min-width: 9.5rem;
}

.quotations-index__card {
    background-color: var(--q-white);
    border: 1px solid var(--q-gray-light);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.quotations-index__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.quotations-index__search-wrap {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}

.quotations-index__search-wrap > .fa-search,
.quotations-index__search-wrap > .fas.fa-search {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--q-gray-muted);
    font-size: 0.8125rem;
    pointer-events: none;
}

.quotations-index__search {
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--q-gray-light);
    border-radius: 0.5rem;
    padding: 0.5em 0.75em 0.5em 2.35rem;
    color: var(--q-gray);
    background-color: var(--q-white);
}

.quotations-index__search:focus {
    border-color: rgba(91, 89, 89, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
    outline: none;
}

.quotations-index__archive-select {
    flex: 0 0 auto;
    width: 9rem;
    height: 2.5rem;
    border: 1px solid var(--q-gray-light);
    border-radius: 0.5rem;
    padding: 0.35em 0.65em;
    color: var(--q-gray);
    background-color: var(--q-white);
}

.quotations-index__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.quotations-index__actions .btn-quotation-primary,
.quotations-index__actions .btn-quotation-secondary,
.quotations-index__actions .btn-quotation-outline {
    width: auto;
    min-width: 0;
    height: 2.5rem;
}

.quotations-index__active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.15rem 0 0.35rem;
}

.quotations-index__active-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--q-gray-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 0.25rem;
}

.quotations-index__filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background-color: var(--q-surface);
    border: 1px solid var(--q-gray-light);
    color: var(--q-gray);
    font-size: 0.75rem;
    font-weight: 500;
}

.quotations-index__filter-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: none;
    background: transparent;
    color: var(--q-gray-muted);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.quotations-index__filter-pill-remove:hover {
    color: var(--q-gray-dark);
    text-decoration: none;
}

.quotations-index__clear-filters {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
    margin-left: 0.15rem;
}

.quotations-index__clear-filters:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.quotations-index__list-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.25rem 0 0.85rem;
}

.quotations-index__list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.3rem;
    background-color: rgba(255, 204, 0, 0.35);
    color: var(--q-gray-dark);
    font-size: 0.7rem;
}

.quotations-index__list-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--q-gray-dark);
}

.btn-quotation-primary,
.btn-quotation-secondary,
.btn-quotation-outline,
.btn-quotation-approval {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    height: 2.5rem;
    padding: 0 1.1em;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-quotation-primary {
    background-color: var(--q-yellow, #ffcc00);
    color: var(--q-gray-dark, #2f2e2e);
    border-color: var(--q-yellow, #ffcc00);
}

.btn-quotation-primary:hover {
    opacity: 0.92;
    color: var(--q-gray-dark, #2f2e2e);
    text-decoration: none;
}

.btn-quotation-secondary {
    background-color: var(--q-gray-dark, #2f2e2e);
    color: var(--q-white, #fff);
    border-color: var(--q-gray-dark, #2f2e2e);
}

.btn-quotation-secondary:hover {
    background-color: #1f1e1e;
    color: var(--q-white, #fff);
    text-decoration: none;
}

.btn-quotation-secondary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-quotation-outline {
    background-color: var(--q-white, #fff);
    color: var(--q-gray, #5B5959);
    border-color: rgba(91, 89, 89, 0.28);
}

.btn-quotation-outline:hover {
    background-color: var(--q-surface, #f7f7f8);
    color: var(--q-gray-dark, #2f2e2e);
    text-decoration: none;
}

.btn-quotation-outline[aria-disabled="true"] {
    cursor: default;
}

.btn-quotation-approval {
    background-color: #6f42c1;
    border: 1px solid #6f42c1;
    color: #fff;
}

.btn-quotation-approval:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: #fff;
}

.quotations-index__table-wrap {
    margin-bottom: 1rem;
    border: 1px solid var(--q-gray-light);
    border-radius: 0.5rem;
    overflow: auto;
}

.quotations-index__table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--q-white);
    margin-bottom: 0;
}

.quotations-index__table thead th {
    padding: 0.8em 1em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--q-gray);
    background-color: var(--q-thead);
    border-bottom: 1px solid var(--q-gray-light);
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.quotations-index__sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.quotations-index__sort-link:hover,
.quotations-index__sort-link:focus {
    color: var(--q-dark, #1f2937);
    text-decoration: none;
}

.quotations-index__sort-link i {
    font-size: 0.7rem;
    color: #9ca3af;
    line-height: 1;
}

.quotations-index__sort-th.is-sorted .quotations-index__sort-link i {
    color: #6b7280;
}

.quotations-index__sort-th.text-right .quotations-index__sort-link {
    justify-content: flex-end;
    width: 100%;
}

.quotations-index__sort-th.text-center .quotations-index__sort-link {
    justify-content: center;
    width: 100%;
}

.quotations-index__table tbody td {
    padding: 0.85em 1em;
    font-size: 0.8125rem;
    color: var(--q-gray);
    border-bottom: 1px solid var(--q-gray-light);
    vertical-align: middle;
}

.quotations-index__table tbody td[nowrap],
.quotations-index__table tbody td.quotations-index__actions-cell {
    white-space: nowrap;
}

.quotations-index__clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.35;
    max-width: 18rem;
    min-width: 7.5rem;
    color: inherit;
}

.quotations-index__table tbody td:has(.quotations-index__clamp) {
    white-space: normal;
    vertical-align: middle;
    max-width: 18rem;
}

.quotations-index__table tbody tr:last-child td {
    border-bottom: none;
}

.quotations-index__table tbody tr:hover {
    background-color: rgba(255, 204, 0, 0.05);
}

.quotations-index__actions-col,
.quotations-index__actions-cell {
    width: 5.5rem;
    min-width: 5.5rem;
}

.quotations-index__actions-cell {
    text-align: right;
}

.quotations-index__row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.quotations-index__view-btn,
.quotations-index__actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--q-gray-light);
    background: var(--q-white);
    color: var(--q-gray);
    cursor: pointer;
    border-radius: 0.375rem;
    text-decoration: none;
    line-height: 1;
}

.quotations-index__view-btn:hover,
.quotations-index__actions-toggle:hover,
.quotations-index__actions-toggle[aria-expanded="true"] {
    background-color: rgba(255, 204, 0, 0.18);
    border-color: rgba(255, 204, 0, 0.55);
    color: var(--q-gray-dark);
    text-decoration: none;
}

.quotations-index__actions-toggle::after {
    display: none;
}

.quotations-index__action-menu {
    min-width: 9.5rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--q-gray-light);
    border-radius: 0.375rem;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.quotations-index__action-item {
    display: block;
    padding: 0.7em 1em;
    color: var(--q-gray);
    text-decoration: none;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--q-gray-light);
    background-color: var(--q-white);
}

.quotations-index__action-item:last-child {
    border-bottom: none;
}

.quotations-index__action-item:hover {
    background-color: rgba(255, 204, 0, 0.12);
    color: var(--q-gray);
    text-decoration: none;
}

.quotations-index__link {
    color: var(--q-gray-dark);
    font-weight: 600;
    text-decoration: none;
}

.quotations-index__link:hover {
    color: var(--q-gray-dark);
    text-decoration: underline;
}

.quotations-index__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.quotations-index__status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: currentColor;
    flex: 0 0 auto;
}

.quotations-index__status.status--pending {
    background-color: #fff4e0;
    color: #d68910;
}

.quotations-index__status.status--approved {
    background-color: #e6faf3;
    color: #169b6b;
}

.quotations-index__status.status--issued {
    background-color: #e8f1ff;
    color: #2f6fed;
}

.quotations-index__status.status--completed {
    background-color: #f1e9ff;
    color: #7c3aed;
}

.quotations-index__status.status--cancelled {
    background-color: #eef0f5;
    color: #6c757d;
    text-decoration: none;
}

.quotations-index__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding-top: 0.75em;
}

.quotations-index__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.25rem;
    text-align: center;
    color: var(--q-gray);
}

.quotations-index__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 1.25rem;
}

.quotations-index__empty-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
}

.quotations-index__empty-hint {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.quotations-index__empty-clear {
    margin-top: 0.5rem;
}

.quotations-index__per-page-form {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.quotations-index__per-page-label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--q-gray);
    white-space: nowrap;
}

.quotations-index__per-page-select {
    height: 2rem;
    padding: 0.25em 0.5em;
    border: 1px solid var(--q-gray-light);
    border-radius: 0.375rem;
    color: var(--q-gray);
    background-color: var(--q-white);
}

.quotations-index__count {
    font-size: 0.8125rem;
    color: var(--q-gray-muted);
}

.quotations-index__pagination .pagination {
    margin: 0;
}

.quotations-index__pagination .page-item {
    margin: 0 0.15rem;
}

.quotations-index__pagination .page-link {
    color: var(--q-gray);
    border: 1px solid var(--q-gray-light);
    padding: 0.35em 0.65em;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.35rem;
    background-color: var(--q-white);
}

.quotations-index__pagination .page-item.active .page-link {
    background-color: var(--q-yellow);
    border-color: var(--q-yellow);
    color: var(--q-gray-dark);
    border-radius: 0.35rem;
    font-weight: 700;
}

.quotations-index__pagination .page-link:hover {
    background-color: rgba(255, 204, 0, 0.15);
    color: var(--q-gray-dark);
}

@media (max-width: 768px) {
    .quotations-index__header {
        flex-direction: column;
        align-items: stretch;
    }

    .quotations-index__subtitle {
        margin-left: 0;
    }

    .quotations-index__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .quotations-index__search-wrap {
        width: 100%;
    }

    .quotations-index__actions {
        margin-left: 0;
        justify-content: flex-end;
    }

    .quotations-index__footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Sticky index: keep header, toolbar, and table head in place; scroll only the table body */
.quotations-index--sticky {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 4.5rem);
    max-height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 4.5rem);
    overflow: hidden;
}

.quotations-index--sticky .quotations-index__header {
    flex: 0 0 auto;
    margin-bottom: 1rem;
    background-color: #f8f9fc;
    z-index: 5;
}

.quotations-index--sticky .quotations-index__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.quotations-index--sticky .quotations-index__toolbar,
.quotations-index--sticky .quotations-index__active-filters,
.quotations-index--sticky .quotations-index__list-head {
    flex: 0 0 auto;
    background-color: var(--q-white);
    z-index: 4;
}

.quotations-index--sticky .quotations-index__toolbar {
    margin-bottom: 0.75rem;
}

.quotations-index--sticky .quotations-index__table-wrap {
    flex: 1 1 auto;
    min-height: 12rem;
    overflow: auto;
    margin-bottom: 0.75rem;
}

.quotations-index--sticky .quotations-index__table {
    margin-bottom: 0;
}

.quotations-index--sticky .quotations-index__table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--q-thead);
    box-shadow: 0 1px 0 var(--q-gray-light);
}

.quotations-index--sticky .quotations-index__footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--q-gray-light);
}

@media (max-width: 767.98px) {
    .quotations-index--sticky {
        height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 3.5rem);
        max-height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 3.5rem);
    }
}

/* List filter slide-out drawer */
.list-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    visibility: hidden;
}

.list-filter-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.list-filter-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.list-filter-drawer.is-open .list-filter-drawer__backdrop {
    opacity: 1;
}

.list-filter-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(26.5rem, 100vw);
    height: 100%;
    background: #fff;
    box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.list-filter-drawer.is-open .list-filter-drawer__panel {
    transform: translateX(0);
}

.list-filter-drawer__form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.list-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(91, 89, 89, 0.12);
    flex: 0 0 auto;
}

.list-filter-drawer__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2e2e;
}

.list-filter-drawer__close {
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #5B5959;
    border-radius: 0.375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.list-filter-drawer__close:hover {
    background: rgba(91, 89, 89, 0.08);
    color: #2f2e2e;
}

.list-filter-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}

.list-filter-drawer__section {
    margin-bottom: 1.35rem;
}

.list-filter-drawer__section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2f2e2e;
}

.list-filter-drawer__section-title::before {
    content: "";
    width: 0.25rem;
    height: 0.9rem;
    border-radius: 999px;
    background: #ffcc00;
    flex: 0 0 auto;
}

.list-filter-drawer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.list-filter-drawer__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.list-filter-drawer__grid .list-filter-drawer__field {
    margin-bottom: 0;
}

.list-filter-drawer__grid .list-filter-drawer__field--full {
    grid-column: 1 / -1;
}

.list-filter-drawer__field label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5B5959;
}

.list-filter-drawer__input-wrap {
    position: relative;
}

.list-filter-drawer__input-wrap > i {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(91, 89, 89, 0.55);
    font-size: 0.8rem;
    pointer-events: none;
}

.list-filter-drawer__input {
    width: 100%;
    height: 2.4rem;
    border: 1px solid rgba(91, 89, 89, 0.18);
    border-radius: 0.5rem;
    padding: 0.45rem 2.2rem 0.45rem 0.75rem;
    font-size: 0.8125rem;
    color: #2f2e2e;
    background: #fff;
}

.list-filter-drawer__input.list-filter-drawer__select,
.list-filter-drawer__field > .list-filter-drawer__input {
    padding-right: 0.75rem;
}

.list-filter-drawer__input:focus {
    outline: none;
    border-color: rgba(255, 204, 0, 0.85);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
}

.list-filter-drawer__hint {
    margin: 0 0 0.65rem;
    font-size: 0.75rem;
    color: rgba(91, 89, 89, 0.65);
}

.list-filter-drawer__section--collapse .list-filter-drawer__collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.list-filter-drawer__section--collapse .list-filter-drawer__section-title {
    margin-bottom: 0;
}

.list-filter-drawer__collapse-toggle > .fa-chevron-down {
    color: #5B5959;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.list-filter-drawer__section--collapse:not(.is-open) .list-filter-drawer__collapse-toggle > .fa-chevron-down {
    transform: rotate(-90deg);
}

.list-filter-drawer__section--collapse:not(.is-open) .list-filter-drawer__collapse-body {
    display: none;
}

.list-filter-drawer__footer {
    flex: 0 0 auto;
    display: flex;
    gap: 0.65rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(91, 89, 89, 0.12);
    background: #fff;
}

.list-filter-drawer__reset,
.list-filter-drawer__apply {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    justify-content: center;
    text-decoration: none;
    height: 2.5rem;
}

.list-filter-drawer__reset {
    background-color: #fff;
    color: #2f2e2e;
    border: 1px solid rgba(91, 89, 89, 0.28);
}

.list-filter-drawer__reset:hover {
    background-color: #f7f7f8;
    color: #2f2e2e;
    text-decoration: none;
}

.list-filter-drawer__apply {
    background-color: #ffcc00;
    color: #2f2e2e;
    border: 1px solid #ffcc00;
    font-weight: 700;
}

.list-filter-drawer__apply:hover {
    opacity: 0.92;
    color: #2f2e2e;
}

body.list-filter-drawer-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .list-filter-drawer__grid {
        grid-template-columns: 1fr;
    }
}

/* quotation create / edit form */
.quotation-form {
    --qf-yellow: #ffcc00;
    --qf-gray: #5B5959;
    --qf-white: #fff;
    --qf-gray-light: rgba(91, 89, 89, 0.12);
    --qf-surface: #f5f5f5;
    /* Shared with .btn-quotation-* tokens from list pages */
    --q-yellow: #ffcc00;
    --q-gray: #5B5959;
    --q-gray-dark: #2f2e2e;
    --q-white: #fff;
    --q-surface: #f7f7f8;
}

.quotation-form__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1.5em;
    position: sticky;
    top: var(--eb-shell-topbar, 4.375rem);
    z-index: 1015;
    background-color: #f8f9fc;
    padding: 0.75rem 0;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-bottom: 1px solid rgba(91, 89, 89, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quotation-form__title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--qf-gray);
    margin: 0;
}

.quotation-form__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

/* Sticky create/edit: keep title + actions fixed; scroll tab panels / form body */
.quotation-form--sticky {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 4.5rem);
    max-height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 4.5rem);
    overflow: hidden;
}

.quotation-form--sticky > .quotation-form__header,
.quotation-form--sticky > .quotation-show__header {
    flex: 0 0 auto;
    position: relative;
    top: auto;
    margin-bottom: 1rem;
    z-index: 5;
}

.quotation-form--sticky > .info,
.quotation-form--sticky > .alert {
    flex: 0 0 auto;
}

.quotation-create-draft-banner {
    display: flex;
    align-items: center;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
}

.quotation-create-draft-banner.d-none {
    display: none;
}

.quotation-create-draft-banner .btn-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0c5460;
}

.quotation-form--sticky > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quotation-form--sticky > .quotation-form__card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Tabbed create/edit/show: tabs stay put; only active panel scrolls */
.quotation-form--sticky-tabs > form > .quotation-form__card,
.quotation-form--sticky-tabs > .quotation-form__card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
}

.quotation-form--sticky-tabs .quotation-form__tabs {
    flex: 0 0 auto;
    z-index: 2;
}

/* Issuance edit: panels live inside #issuance-edit-form under the card */
.quotation-form--sticky-tabs > .quotation-form__card > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* When an outside-form panel (e.g. Bond Closure) is active, collapse the form */
.quotation-form--sticky-tabs > .quotation-form__card > form:not(:has(.quotation-form__panel.is-active)) {
    flex: 0 0 0;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
}

.quotation-form--sticky-tabs .quotation-form__panel.is-active {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.quotation-form--sticky > .quotation-form__version-history {
    flex: 0 0 auto;
    max-height: 12rem;
    overflow-y: auto;
    margin-top: 0.5rem;
}

/* Non-tabbed (approval): scroll form body / content under header */
.quotation-form--body-scroll > form,
.quotation-form--body-scroll > .quotation-form__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: block;
}

@media (max-width: 767.98px) {
    .quotation-form--sticky {
        height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 3.5rem);
        max-height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 3.5rem);
    }
}

.quotation-form .btn-quotation-secondary {
    min-width: 9.5rem;
    width: auto;
}

.quotation-form .btn-quotation-primary {
    min-width: 10rem;
    width: auto;
}

.quotation-form .btn-quotation-outline {
    min-width: 9.5rem;
    width: auto;
}

.quotation-form__card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: .25em;
}

.quotation-form__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 0 0;
    margin-bottom: 1.25rem;
    background-color: transparent;
    border-bottom: 1px solid rgba(91, 89, 89, 0.14);
}

.quotation-form__tab {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: rgba(91, 89, 89, 0.65);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75em 1.15em;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-bottom: -1px;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.quotation-form__tab:hover {
    background-color: transparent;
    color: #2f2e2e;
}

.quotation-form__tab:focus,
.quotation-form__tab:focus-visible,
.quotation-form__tab:active {
    outline: none;
    box-shadow: none;
    border-color: transparent;
    border-bottom-color: transparent;
}

.quotation-form__tab.is-active:focus,
.quotation-form__tab.is-active:focus-visible,
.quotation-form__tab.is-active:active {
    border-bottom-color: var(--qf-yellow);
}

.quotation-form__tab:disabled,
.quotation-form__tab[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    background-color: transparent;
    color: #858796;
}

.quotation-form__tab.is-active {
    background-color: transparent;
    border-bottom-color: var(--qf-yellow);
    color: #2f2e2e;
    font-weight: 700;
}

.quotation-form__panel {
    display: none;
    padding: 0;
}

.quotation-form__panel.is-active {
    display: block;
}

.quotation-form__surface {
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quotation-form__section-title {
    font-weight: 700;
    color: var(--qf-gray);
    margin-bottom: 1em;
}

/* Mockup section cards */
.qf-section {
    background: #fff;
    border: 1px solid rgba(91, 89, 89, 0.12);
    border-radius: 0.65rem;
    padding: 1.15rem 1.25rem 1.25rem;
}

.qf-section__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.qf-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.4rem;
    background: rgba(255, 204, 0, 0.28);
    color: #b8860b;
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.qf-section__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2f2e2e;
}

.qf-section__body {
    min-width: 0;
}

.qf-section__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.45rem;
    background: rgba(255, 204, 0, 0.18);
    color: #5B5959;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.qf-section__hint i {
    color: #b8860b;
    margin-top: 0.15rem;
}

.qf-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.qf-section-grid--premium {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.qf-field-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.qf-field-row .form-group {
    flex: 1 1 10rem;
    margin-bottom: 0;
}

.qf-field-row .form-check {
    flex: 0 0 auto;
    padding-bottom: 0.45rem;
    white-space: nowrap;
}

.quotation-form .searchable-select {
    position: relative;
}

.quotation-form .qf-required-highlight,
.quotation-form .searchable-select.qf-required-highlight {
    border-radius: 0.45rem;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.55);
}

.quotation-form .searchable-select.qf-required-highlight .searchable-select__input,
.quotation-form .qf-required-highlight.form-control {
    border-color: #e0b400;
    background-color: #fffbeb;
}

.quotation-form .searchable-select.is-invalid .searchable-select__input,
.quotation-form .searchable-select.is-invalid.qf-required-highlight .searchable-select__input {
    border-color: #e74a3b;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.2);
}

.quotation-form .searchable-select__input {
    padding-right: 2.25rem;
}

.quotation-form .searchable-select::after {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(91, 89, 89, 0.45);
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 2;
}

.quotation-form .form-check-input:checked {
    background-color: #ffcc00;
    border-color: #ffcc00;
}

.quotation-form .form-control,
.quotation-form select.form-control,
.quotation-form textarea.form-control {
    border-radius: 0.45rem;
    border-color: rgba(91, 89, 89, 0.2);
    min-height: 2.4rem;
}

.quotation-form textarea.form-control {
    min-height: 7rem;
}

.qf-person-grid {
    display: grid;
    gap: 0.65rem;
}

.qf-person-grid__head,
.qf-person-grid__row {
    display: grid;
    gap: 0.5rem;
}

.qf-person-grid--signatory .qf-person-grid__head,
.qf-person-grid--signatory .qf-person-grid__row {
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr;
}

.qf-person-grid--cosigner .qf-person-grid__head,
.qf-person-grid--cosigner .qf-person-grid__row {
    grid-template-columns: 1.3fr 1fr 1.2fr 1fr 1fr;
}

.qf-person-grid--endt-signatory .qf-person-grid__head,
.qf-person-grid--endt-signatory .qf-person-grid__row {
    grid-template-columns: 1.4fr 1fr 1fr;
}

.qf-person-grid--endt-cosigner .qf-person-grid__head,
.qf-person-grid--endt-cosigner .qf-person-grid__row {
    grid-template-columns: 1.4fr 1fr;
}

.qf-person-grid__head span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #5B5959;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.qf-person-grid__row .form-control {
    margin-bottom: 0;
}

.qf-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

.qf-premium-table th,
.qf-premium-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(91, 89, 89, 0.1);
    vertical-align: middle;
}

.qf-premium-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5B5959;
    background: rgba(255, 204, 0, 0.22);
}

.qf-premium-table thead th:not(:first-child),
.qf-premium-table td:not(:first-child) {
    text-align: right;
    width: 28%;
}

.qf-premium-table td:first-child {
    font-weight: 600;
    color: #2f2e2e;
    white-space: nowrap;
}

.qf-premium-table .form-control {
    margin: 0;
    text-align: right;
}

.qf-premium-table__total {
    background: rgba(255, 204, 0, 0.22);
}

.qf-premium-table__total td {
    border-bottom: none;
    font-weight: 700;
}

.qf-premium-table.is-php-currency .qf-premium-table__other {
    display: none;
}

.qf-other-currency-code:not(:empty)::before {
    content: "(";
}

.qf-other-currency-code:not(:empty)::after {
    content: ")";
}

.qe-bond-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.qe-bond-layout__main,
.qe-bond-layout__compute,
.qe-bond-layout__rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.qe-premium-tab-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.qe-premium-tab-layout__policy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.qe-premium-tab-layout__compute {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.qe-premium-inputs {
    /* background: rgba(255, 204, 0, 0.12); */
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.qe-bond-subheading {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(91, 89, 89, 0.75);
}

.qf-section__toggle {
    margin-left: auto;
    border: none;
    background: transparent;
    color: rgba(91, 89, 89, 0.65);
    cursor: pointer;
    padding: 0.25rem;
}

.qf-section--collapsible.is-collapsed .qf-section__body {
    display: none;
}

.qf-section--collapsible.is-collapsed .qf-section__toggle i {
    transform: rotate(180deg);
}

.qe-changes-made__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 204, 0, 0.85);
    color: #2f2e2e;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.qe-changes-made__refresh {
    margin-left: auto;
    margin-right: 0.15rem;
    border: none;
    background: transparent;
    color: rgba(91, 89, 89, 0.65);
    cursor: pointer;
    padding: 0.25rem;
}

.qe-changes-made__refresh:hover {
    color: #2f2e2e;
}

.qe-changes-made__list,
.qe-revision-history__list {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
}

.qe-changes-made__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(91, 89, 89, 0.1);
}

.qe-changes-made__item:last-child {
    border-bottom: none;
}

.qe-changes-made__item-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qe-changes-made__item-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2f2e2e;
}

.qe-changes-made__item-diff {
    font-size: 0.75rem;
    color: rgba(91, 89, 89, 0.75);
    word-break: break-word;
}

.qe-changes-made__empty,
.qe-revision-history__empty {
    font-size: 0.8125rem;
    padding: 0.35rem 0 0.75rem;
}

.qe-badge-modified {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    background: rgba(255, 204, 0, 0.28);
    color: #8a6d00;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.qe-revision-history__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(91, 89, 89, 0.1);
}

.qe-revision-history__item:last-child {
    border-bottom: none;
}

.qe-revision-history__item-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qe-revision-history__item-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2f2e2e;
}

.qe-revision-history__item.is-current .qe-revision-history__item-title {
    color: #1e7e34;
}

.qe-revision-history__item-meta {
    font-size: 0.72rem;
    color: rgba(91, 89, 89, 0.7);
}

.qe-revision-history__restore {
    flex: 0 0 auto;
    white-space: nowrap;
}

.qe-side-history__footer-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.qe-compare-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
}

.qe-compare-list li + li {
    margin-top: 0.4rem;
}

.qe-bond-layout__versions #version-history-card {
    border: none;
    margin: 0;
    box-shadow: none;
}

.qe-bond-layout__versions .card-header {
    display: none;
}

@media (max-width: 1199.98px) {
    .qe-bond-layout {
        grid-template-columns: 1fr;
    }

    .qe-premium-tab-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .qe-bond-layout {
        grid-template-columns: 1fr;
    }
}

.quotation-form .qf-requirements.card {
    border: none;
    box-shadow: none;
    margin: 0;
    background: transparent;
}

.quotation-form .qf-requirements .card-header {
    display: none;
}

.quotation-form .qf-requirements .card-body {
    padding: 0;
}

@media (max-width: 991.98px) {
    .qf-section-grid,
    .qf-section-grid--premium,
    .qf-detail-grid {
        grid-template-columns: 1fr;
    }

    .qf-person-grid--signatory .qf-person-grid__head,
    .qf-person-grid--signatory .qf-person-grid__row,
    .qf-person-grid--cosigner .qf-person-grid__head,
    .qf-person-grid--cosigner .qf-person-grid__row,
    .qf-person-grid--endt-signatory .qf-person-grid__head,
    .qf-person-grid--endt-signatory .qf-person-grid__row,
    .qf-person-grid--endt-cosigner .qf-person-grid__head,
    .qf-person-grid--endt-cosigner .qf-person-grid__row {
        grid-template-columns: 1fr 1fr;
    }

    .qf-person-grid__head {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .qf-person-grid--signatory .qf-person-grid__row,
    .qf-person-grid--cosigner .qf-person-grid__row,
    .qf-person-grid--endt-signatory .qf-person-grid__row,
    .qf-person-grid--endt-cosigner .qf-person-grid__row {
        grid-template-columns: 1fr;
    }

    .qf-premium-table thead th:not(:first-child),
    .qf-premium-table td:not(:first-child) {
        width: auto;
    }
}

.quotation-form__badge {
    display: inline-block;
    padding: 0.35em 0.85em;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.quotation-form__badge.status--pending {
    background-color: rgba(255, 193, 7, 0.25);
    color: #856404;
}

.quotation-form__badge.status--approved {
    background-color: rgba(40, 167, 69, 0.15);
    color: #155724;
}

.quotation-form__badge.status--cancelled {
    background-color: rgba(220, 53, 69, 0.15);
    color: #721c24;
}

/* quotation show (read-only detail) */
.quotation-show {
    --q-yellow: #ffcc00;
    --q-gray: #5B5959;
    --q-gray-dark: #2f2e2e;
    --q-white: #fff;
    --q-surface: #f7f7f8;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 4.5rem);
    max-height: calc(100vh - var(--eb-shell-topbar, 4.375rem) - 4.5rem);
    overflow: hidden;
}

.quotation-show__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(91, 89, 89, 0.75);
    text-decoration: none;
    margin-bottom: 0.65rem;
}

.quotation-show__back:hover {
    color: var(--q-gray-dark);
    text-decoration: none;
}

.quotation-show__header {
    flex: 0 0 auto;
    z-index: 1015;
    margin-bottom: 0;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding: 0.75rem 0.25rem;
    background-color: #f8f9fc;
    border-bottom: 1px solid rgba(91, 89, 89, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quotation-show__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 0.25rem 1.5rem;
}

.quotation-show__header-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
}

.quotation-show__heading {
    min-width: 0;
}

.quotation-show__title {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--q-gray-dark);
    line-height: 1.2;
}

.quotation-show__subtitle {
    margin: 0 0 0.65rem;
    font-size: 0.9375rem;
    color: var(--q-gray);
}

.quotation-show__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    font-size: 0.8125rem;
    color: rgba(91, 89, 89, 0.7);
}

.quotation-show__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.quotation-show__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    align-self: center;
}

.quotation-show__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.quotation-show__section {
    background: var(--q-white);
    border: 1px solid rgba(91, 89, 89, 0.12);
    border-radius: 0.65rem;
    padding: 1.15rem 1.25rem 1.25rem;
    min-width: 0;
}

.quotation-show__section--wide {
    grid-column: 1 / -1;
}

.quotation-show__section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.quotation-show__section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.35rem;
    background: rgba(255, 204, 0, 0.28);
    color: #b8860b;
    font-size: 0.75rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.quotation-show__section-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--q-gray-dark);
}

.quotation-show__dl {
    margin: 0;
}

.quotation-show__dl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(91, 89, 89, 0.08);
}

.quotation-show__dl-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.quotation-show__dl-row dt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(91, 89, 89, 0.65);
}

.quotation-show__dl-row dt i {
    width: 0.9rem;
    color: #b8860b;
    text-align: center;
}

.quotation-show__dl-row dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--q-gray-dark);
    word-break: break-word;
}

.quotation-show__flag {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.35rem;
    background: rgba(255, 204, 0, 0.18);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--q-gray-dark);
}

.quotation-show__text-block {
    margin-bottom: 0.85rem;
}

.quotation-show__text-block:last-child {
    margin-bottom: 0;
}

.quotation-show__text-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(91, 89, 89, 0.65);
}

.quotation-show__text-value {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
    background: var(--q-surface);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--q-gray-dark);
    white-space: pre-wrap;
}

.quotation-show__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.quotation-show__badge--corporate {
    background: rgba(40, 167, 69, 0.12);
    color: #155724;
}

.quotation-show__badge--individual {
    background: rgba(23, 162, 184, 0.12);
    color: #0c5460;
}

.quotation-show__badge--renewal {
    background: rgba(255, 193, 7, 0.2);
    color: #856404;
}

.quotation-show__requirements {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.quotation-show__requirements li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--q-gray-dark);
}

.quotation-show__requirements li i {
    color: #28a745;
    margin-top: 0.15rem;
}

.quotation-show__subblock {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(91, 89, 89, 0.1);
}

.quotation-show__subblock-title {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(91, 89, 89, 0.65);
}

.quotation-show__premium-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
}

.quotation-show__premium-inset {
    padding: 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 204, 0, 0.14);
    border: 1px solid rgba(255, 204, 0, 0.25);
}

.quotation-show__premium-inset-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(91, 89, 89, 0.08);
    font-size: 0.8125rem;
}

.quotation-show__premium-inset-row:last-child {
    border-bottom: none;
}

.quotation-show__premium-inset-row span:first-child {
    color: rgba(91, 89, 89, 0.75);
    font-weight: 600;
}

.quotation-show__premium-inset-row strong {
    color: var(--q-gray-dark);
    font-weight: 700;
    text-align: right;
}

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

.quotation-show__premium-table th,
.quotation-show__premium-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(91, 89, 89, 0.1);
    font-size: 0.8125rem;
}

.quotation-show__premium-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(91, 89, 89, 0.65);
    background: rgba(255, 204, 0, 0.12);
}

.quotation-show__premium-table thead th:not(:first-child),
.quotation-show__premium-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.quotation-show__premium-table__total {
    background: rgba(255, 204, 0, 0.22);
}

.quotation-show__premium-table__total td {
    border-bottom: none;
    font-weight: 700;
    color: var(--q-gray-dark);
}

.quotation-show__premium-table.is-php-currency .quotation-show__premium-table__other {
    display: none;
}

.quotation-show__policy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(91, 89, 89, 0.1);
}

.quotation-show__policy-item label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(91, 89, 89, 0.6);
}

.quotation-show__policy-item span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--q-gray-dark);
}

.quotation-show .qf-person-grid__head span {
    font-size: 0.68rem;
}

.quotation-show .qf-person-grid__row {
    align-items: start;
}

.quotation-show .qf-person-grid__row span {
    font-size: 0.8125rem;
    color: var(--q-gray-dark);
    word-break: break-word;
}

@media (max-width: 1199.98px) {
    .quotation-show__grid {
        grid-template-columns: 1fr 1fr;
    }

    .quotation-show__grid .quotation-show__section:nth-child(3) {
        grid-column: 1 / -1;
    }

    .quotation-show__policy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .quotation-show__grid,
    .quotation-show__premium-layout {
        grid-template-columns: 1fr;
    }

    .quotation-show__header-main {
        grid-template-columns: 1fr;
    }

    .quotation-show__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .quotation-show__policy-grid {
        grid-template-columns: 1fr;
    }
}

.quotation-form__version-history {
    margin-top: 1.5em;
}

.quotation-form__version-history .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--qf-gray-light);
    padding: 1em 1.5em;
}

.quotation-form__version-history .card-header h6 {
    color: #4e73df;
    font-weight: 700;
}

.quotation-form__version-history .restore-version-btn {
    color: var(--qf-yellow);
    border-color: var(--qf-yellow);
    background-color: transparent;
}

.quotation-form__version-history .restore-version-btn:hover {
    background-color: var(--qf-yellow);
    color: var(--qf-gray);
}

.quotation-form .form-control[readonly],
.quotation-form .form-control:disabled {
    background-color: var(--qf-surface);
}

.quotation-form .form-control {
    border-radius: 0.375rem;
}

.searchable-select {
    position: relative;
}

.searchable-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2000;
    margin: 0.25em 0 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
    list-style: none;
    background-color: var(--eb-white, #fff);
    border: 1px solid #d1d3e2;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

.searchable-select__option {
    padding: 0.5em 0.75em;
    cursor: pointer;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.searchable-select__option:hover,
.searchable-select__option.is-highlighted {
    background-color: rgba(78, 115, 223, 0.1);
}

.modal .searchable-select__list {
    z-index: 1060;
}

@media (max-width: 767.98px) {
    .quotation-form__header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* approval slip */
.approval-slip__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1.25em;
}

.approval-slip__title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--eb-gray);
    margin: 0;
}

.approval-slip__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

.approval-slip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

.approval-slip__meta {
    border: 1px solid var(--eb-gray-light);
}

.approval-slip .form-control[readonly],
.approval-slip .form-control:disabled {
    background-color: var(--qf-surface);
    cursor: default;
}

.approval-slip__verification-fields[disabled] .form-control {
    background-color: var(--qf-surface);
    cursor: default;
}

.approval-slip-modal .modal-header {
    align-items: center;
}

.approval-slip-modal .modal-header .close {
    margin: -1rem -1rem -1rem 0;
}

.approval-slip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}

.approval-slip-status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: currentColor;
    flex: 0 0 auto;
}

.approval-slip-status--draft {
    background-color: rgba(91, 89, 89, 0.1);
    color: var(--eb-gray);
}

.approval-slip-status--finalized {
    background-color: rgba(91, 89, 89, 0.15);
    color: var(--eb-gray);
}

.approval-slip-status--for-approval {
    background-color: rgba(255, 204, 0, 0.2);
    color: var(--eb-gray);
}

.approval-slip-status--approved {
    background-color: rgba(255, 204, 0, 0.35);
    color: var(--eb-gray);
}

.approval-slip-status--disapproved {
    background-color: rgba(91, 89, 89, 0.08);
    color: var(--eb-gray);
    text-decoration: line-through;
}

a.approval-slip-status:hover {
    opacity: 0.85;
    text-decoration: none;
    color: var(--eb-gray);
}

.approval-slip-panel .qf-section__head {
    flex-wrap: wrap;
}

.approval-slip-panel .qf-section__title {
    margin-right: auto;
}

.approval-slip-modal .modal-dialog {
    max-width: 60rem;
    width: 95%;
}

.approval-slip-modal .modal-body iframe {
    width: 100%;
    height: 45rem;
    border: 0;
}

.approval-slip-embed-body {
    background-color: var(--eb-white);
}

.dashboard-widget-card:hover {
    text-decoration: none;
}

.dashboard-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 8rem;
    background: rgba(255, 255, 255, 0.75);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eb-nav-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.65);
    /* Below Bootstrap modal (1050) so a stuck loader never blocks Send Quotation */
    z-index: 1040;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.eb-nav-loading-overlay.is-visible {
    display: flex;
}

.dashboard-search-input .form-control {
    min-height: 2.5rem;
}

.dashboard-active-filters {
    margin-top: 0.85em;
    padding-top: 0.75em;
    border-top: 1px solid rgba(91, 89, 89, 0.08);
}

.dashboard-active-filters__label {
    font-size: 0.8rem;
    color: var(--eb-dash-muted, #858796);
    margin-right: 0.5em;
    margin-bottom: 0.25em;
}

.dashboard-active-filters__clear {
    color: #4e73df !important;
    font-weight: 600;
    text-decoration: none !important;
    padding-left: 0.35em;
}

.dashboard-active-filters .dashboard-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f6c23e;
    color: #1f2a44;
    border-radius: 999px;
}

.dashboard-filter-chip__remove {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.35em;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
}

.dashboard-filter-chip__remove:hover {
    opacity: 1;
}

.dashboard-search-highlight {
    background-color: #fff3cd;
    padding: 0 0.15em;
    border-radius: 0.1rem;
}

.lifecycle-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
}

.lifecycle-bar__step {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
    border: 1px solid #ddd;
    border-radius: 0.15rem;
    white-space: nowrap;
}

.lifecycle-bar__step.is-done {
    background: #1cc88a;
    color: #fff;
    border-color: #1cc88a;
}

.lifecycle-bar__step.is-active {
    background: #4e73df;
    color: #fff;
    border-color: #4e73df;
}

.dashboard-aging--neutral {
    color: #858796;
}

.dashboard-aging--warning {
    color: #f6c23e;
    font-weight: bold;
}

.dashboard-aging--danger {
    color: #e74a3b;
    font-weight: bold;
}

.dashboard-aging--critical {
    color: #c0392b;
    font-weight: bold;
}

.chart-bar {
    min-height: 20rem;
}

/* modern dashboard design */
.eb-dash {
    --eb-dash-navy: #1f2a44;
    --eb-dash-blue: #4e73df;
    --eb-dash-teal: #2bb3a3;
    --eb-dash-green: #1cc88a;
    --eb-dash-yellow: #f6c23e;
    --eb-dash-red: #e74a3b;
    --eb-dash-info: #36b9cc;
    --eb-dash-ink: #2e3650;
    --eb-dash-muted: #858796;
    --eb-dash-border: rgba(91, 89, 89, 0.12);
}

.eb-dash__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
    margin: 0;
}

.eb-panel {
    background-color: #fff;
    border: 1px solid var(--eb-dash-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.6rem rgba(31, 42, 68, 0.06);
}

.eb-panel__head {
    padding: 1em 1.25em 0.25em;
}

.eb-panel__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
    margin: 0;
}

.eb-panel__body {
    padding: 1em 1.25em 1.25em;
}

/* KPI summary cards */
.eb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1em;
    margin-bottom: 1.25em;
}

.eb-kpi-card {
    grid-column: span 4;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 1em;
    padding: 1.25em 1.5em;
    background-color: #fff;
    border: 1px solid var(--eb-dash-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.6rem rgba(31, 42, 68, 0.06);
}

.eb-kpi-card__item {
    flex: 1;
    text-align: center;
    text-decoration: none;
}

.eb-kpi-card__item + .eb-kpi-card__item {
    border-left: 1px solid var(--eb-dash-border);
}

.eb-kpi-card__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--eb-dash-muted);
    margin-bottom: 0.35em;
}

.eb-kpi-card__value {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
    line-height: 1.1;
}

a.eb-kpi-card__item:hover .eb-kpi-card__value {
    text-decoration: underline;
}

.eb-kpi-card__value--green { color: var(--eb-dash-green); }
.eb-kpi-card__value--red { color: var(--eb-dash-red); }
.eb-kpi-card__value--blue { color: var(--eb-dash-blue); }
.eb-kpi-card__value--teal { color: var(--eb-dash-teal); }

/* analytics row */
.eb-analytics-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25em;
    margin-bottom: 1.25em;
}

.eb-analytics-grid__funnel { grid-column: span 5; }
.eb-analytics-grid__donut { grid-column: span 4; }
.eb-analytics-grid__list { grid-column: span 3; }
.eb-analytics-grid__half { grid-column: span 6; }

/* process funnel */
.eb-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
}

.eb-funnel__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    padding: 0.5em 1em;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    clip-path: polygon(8% 0, 92% 0, 84% 100%, 16% 100%);
}

.eb-funnel__step:nth-child(1) { width: 100%; background-color: #3b6fd4; }
.eb-funnel__step:nth-child(2) { width: 88%; background-color: #2bb3a3; }
.eb-funnel__step:nth-child(3) { width: 76%; background-color: #25a87f; }
.eb-funnel__step:nth-child(4) { width: 64%; background-color: #1cc88a; }

.eb-funnel__count {
    margin-left: 0.5em;
    font-weight: 700;
}

/* donut + legend */
.eb-donut {
    position: relative;
    height: 13rem;
}

.eb-donut__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.eb-donut__center-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
}

.eb-donut__center-label {
    display: block;
    font-size: 0.75rem;
    color: var(--eb-dash-muted);
}

.eb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    margin-top: 1em;
    justify-content: center;
}

.eb-legend__item {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--eb-dash-ink);
}

.eb-legend__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    margin-right: 0.4em;
}

/* horizontal stat bars */
.eb-statbars {
    display: flex;
    flex-direction: column;
    gap: 0.85em;
}

.eb-statbar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--eb-dash-ink);
    margin-bottom: 0.3em;
}

.eb-statbar__count {
    font-weight: 700;
}

.eb-statbar__track {
    height: 0.55rem;
    background-color: #eef0f5;
    border-radius: 1rem;
    overflow: hidden;
}

.eb-statbar__fill {
    height: 100%;
    border-radius: 1rem;
    background-color: var(--eb-dash-blue);
}

.eb-chart {
    position: relative;
    height: 15rem;
}

@media (max-width: 1199.98px) {
    .eb-analytics-grid__funnel,
    .eb-analytics-grid__donut,
    .eb-analytics-grid__list,
    .eb-analytics-grid__half {
        grid-column: span 6;
    }
}

@media (max-width: 767.98px) {
    .eb-kpi-card,
    .eb-analytics-grid__funnel,
    .eb-analytics-grid__donut,
    .eb-analytics-grid__list,
    .eb-analytics-grid__half {
        grid-column: span 12;
    }
}

/* dashboard filter bar */
.eb-filter-panel .eb-panel__body {
    padding: 1em 1.25em;
}

.eb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em;
}

.eb-filter-field {
    position: relative;
    flex: 1 1 11rem;
    min-width: 9rem;
}

.eb-filter-field--search {
    flex: 2 1 16rem;
}

.eb-filter {
    width: 100%;
    height: 2.6rem;
    padding: 0 1em;
    font-size: 0.85rem;
    color: var(--eb-dash-ink, #2e3650);
    background-color: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
}

.eb-filter::placeholder {
    color: #a7a9b8;
}

.eb-filter:focus {
    outline: none;
    border-color: #bac8f3;
    box-shadow: 0 0 0 0.15rem rgba(78, 115, 223, 0.15);
}

select.eb-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.2em;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23858796'%3E%3Cpath d='M4 6h8l-4 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
    background-size: 0.8rem;
}

.eb-filter-field--search .eb-filter {
    padding-right: 2.6em;
}

.eb-filter-search__btn {
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #4e73df;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25em;
}

.eb-filter-apply {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    height: 2.6rem;
    padding: 0 1.25em;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background-color: #4e73df;
    border: 1px solid #4e73df;
    border-radius: 0.5rem;
    cursor: pointer;
}

.eb-filter-apply:hover {
    background-color: #2e59d9;
    border-color: #2e59d9;
}

/* dashboard v2 layout */
.eb-dash {
    background-color: #f4f7fb;
    margin: -1.5em -1.5em 0;
    padding: 1.5em;
    min-height: calc(100vh - 4rem);
}

.eb-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1.15em;
}

.eb-dash-header__subtitle {
    margin: 0.2em 0 0;
    font-size: 0.9rem;
    color: var(--eb-dash-muted);
}

.eb-dash-header__refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    height: 2.35rem;
    padding: 0 1em;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--eb-dash-ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.1rem 0.35rem rgba(31, 42, 68, 0.04);
}

.eb-dash-header__refresh:hover {
    background: #f8f9fc;
}

.eb-dash-filter {
    background: #fff;
    border: 1px solid var(--eb-dash-border);
    border-radius: 0.85rem;
    padding: 1.15em 1.25em 1em;
    margin-bottom: 1.25em;
    box-shadow: 0 0.15rem 0.6rem rgba(31, 42, 68, 0.04);
    overflow: hidden;
}

.eb-dash-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em 1em;
    align-items: flex-end;
}

.eb-dash-filter__panel {
    margin-top: 0.85em;
}

.eb-dash-filter__panel.is-collapsed {
    display: none;
}

.eb-dash-filter__row--fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0;
}

.eb-dash-filter__outline .eb-dash-filter__toggle-label {
    margin-right: 0.35em;
}

.eb-dash-filter__row--search {
    flex-wrap: nowrap;
    gap: 0.75em;
    align-items: flex-end;
}

.eb-dash-filter__group {
    flex: 1 1 9rem;
    min-width: 0;
}

.eb-dash-filter__group--date-from {
    grid-column: 1;
    grid-row: 2;
}

.eb-dash-filter__group--date-to {
    grid-column: 2;
    grid-row: 2;
}

.eb-dash-filter__row--search .eb-dash-filter__group--search {
    flex: 1 1 auto;
    min-width: 0;
}

.eb-dash-filter__actions {
    display: flex;
    align-items: center;
    gap: 0.55em;
    flex: 0 0 auto;
    padding-bottom: 0.05em;
}

.eb-dash-filter__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eb-dash-muted);
    margin-bottom: 0.35em;
}

.eb-dash-filter__input {
    width: 100%;
    height: 2.4rem;
    padding: 0 0.85em;
    font-size: 0.85rem;
    color: var(--eb-dash-ink);
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
}

.eb-dash-filter__input:focus {
    outline: none;
    border-color: #f0d078;
    box-shadow: 0 0 0 0.12rem rgba(246, 194, 62, 0.18);
}

select.eb-dash-filter__input {
    appearance: none;
    padding-right: 2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23858796'%3E%3Cpath d='M4 6h8l-4 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 0.75rem;
}

.eb-dash-filter__search {
    position: relative;
}

.eb-dash-filter__search .eb-dash-filter__input {
    padding-right: 2.5em;
}

.eb-dash-filter__search-btn {
    position: absolute;
    right: 0.35em;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.35rem;
    background: #1f2a44;
    color: #fff;
    cursor: pointer;
}

.eb-dash-filter__outline {
    height: 2.4rem;
    padding: 0 1em;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--eb-dash-ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.eb-dash-filter__outline:hover {
    background: #f8f9fc;
}

.eb-dash-filter__apply {
    height: 2.4rem;
    padding: 0 1.15em;
    border: none;
    border-radius: 0.5rem;
    background: #f6c23e;
    color: #1f2a44;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.eb-dash-filter__apply:hover {
    filter: brightness(0.97);
}

.eb-dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1em;
    margin-bottom: 1.35em;
}

.eb-dash-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.95em;
    min-height: 7.25rem;
    padding: 1.25em 1.1em;
    background: #fff;
    border: 1px solid var(--eb-dash-border);
    border-top: 4px solid #d1d3e2;
    border-radius: 0.85rem;
    text-decoration: none;
    box-shadow: 0 0.12rem 0.5rem rgba(31, 42, 68, 0.05);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.eb-dash-kpi:hover {
    text-decoration: none;
    box-shadow: 0 0.2rem 0.75rem rgba(31, 42, 68, 0.1);
    transform: translateY(-1px);
}

.eb-dash-kpi__icon {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.eb-dash-kpi--yellow { border-top-color: #f6c23e; }
.eb-dash-kpi--green { border-top-color: #1cc88a; }
.eb-dash-kpi--red { border-top-color: #e74a3b; }
.eb-dash-kpi--blue { border-top-color: #4e73df; }
.eb-dash-kpi--orange { border-top-color: #f6a623; }
.eb-dash-kpi--teal { border-top-color: #2bb3a3; }
.eb-dash-kpi--purple { border-top-color: #7c6cf0; }

.eb-dash-kpi--yellow .eb-dash-kpi__icon { background: #fff8e6; color: #d4a017; }
.eb-dash-kpi--blue .eb-dash-kpi__icon { background: #e8eeff; color: #4e73df; }
.eb-dash-kpi--green .eb-dash-kpi__icon { background: #e6faf3; color: #1cc88a; }
.eb-dash-kpi--red .eb-dash-kpi__icon { background: #fdecea; color: #e74a3b; }
.eb-dash-kpi--cyan .eb-dash-kpi__icon { background: #e6f7fb; color: #36b9cc; }
.eb-dash-kpi--orange .eb-dash-kpi__icon { background: #fff4e6; color: #f6a623; }
.eb-dash-kpi--teal .eb-dash-kpi__icon { background: #e6f5f3; color: #2bb3a3; }
.eb-dash-kpi--purple .eb-dash-kpi__icon { background: #f0ecff; color: #7c6cf0; }

.eb-dash-kpi__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--eb-dash-muted);
    letter-spacing: 0.03em;
}

.eb-dash-kpi__value {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
    line-height: 1.15;
    text-decoration: none;
}

a.eb-dash-kpi__value:hover {
    text-decoration: none;
    color: var(--eb-dash-ink);
}

.eb-dash-kpi__value--split {
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
    font-size: 1rem;
    margin-top: 0.35em;
}

.eb-dash-kpi__split-item {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-decoration: none;
    color: inherit;
}

.eb-dash-kpi__split-item:hover {
    text-decoration: none;
    color: #4e73df;
}

.eb-dash-kpi__split-count {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
}

.eb-dash-kpi__split-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--eb-dash-muted);
}

.eb-dash-kpi__sep {
    align-self: center;
    color: #c5c9d6;
    font-weight: 600;
    padding: 0 0.1em;
    line-height: 1;
    font-size: 1rem;
}

.eb-dash-kpi a.eb-dash-kpi__label {
    text-decoration: none;
    color: inherit;
}

.eb-dash-kpi a.eb-dash-kpi__icon {
    text-decoration: none;
}

.eb-dash-kpi__sub {
    display: block;
    font-size: 0.72rem;
    color: var(--eb-dash-muted);
    margin-top: 0.15em;
}

.eb-panel__title--caps {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eb-dash-ink);
    font-weight: 700;
}

.eb-panel__subtitle {
    margin: 0.25em 0 0;
    font-size: 0.82rem;
    color: var(--eb-dash-muted);
}

.eb-panel__head--status-dist {
    padding: 1.15em 1.35em 0.35em;
}

.eb-dash-analytics {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 1.25em;
}

.eb-dash-analytics__row {
    display: grid;
    gap: 1em;
}

.eb-dash-analytics__row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.eb-panel--status-dist {
    overflow: hidden;
}

.eb-status-dist {
    display: grid;
    grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
    gap: 1.25em;
    align-items: center;
    padding: 0.75em 1.35em 1.25em;
}

.eb-status-dist__total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 8.5rem;
    padding: 1.1em 1.15em;
    background: #f8fafc;
    border: 1px solid var(--eb-dash-border);
    border-radius: 0.75rem;
}

.eb-status-dist__total-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
    line-height: 1.1;
}

.eb-status-dist__total-label {
    margin-top: 0.2em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--eb-dash-ink);
}

.eb-status-dist__total-pct {
    margin-top: 0.15em;
    font-size: 0.75rem;
    color: var(--eb-dash-muted);
}

.eb-status-dist__chart {
    display: flex;
    justify-content: center;
}

.eb-donut--status {
    width: 100%;
    max-width: 17rem;
    height: 15rem;
    position: relative;
}

.eb-status-dist__bar-wrap {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.eb-status-dist__bar-title {
    margin: 0 0 0.5em;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eb-dash-muted);
}

.eb-status-dist__bar {
    width: 100%;
    height: 15rem;
    position: relative;
}

.eb-status-dist__bar-diff {
    margin: 0.5em 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--eb-dash-ink);
}

.eb-status-dist__table-wrap {
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.eb-status-dist__table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.eb-status-dist__table thead th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eb-dash-muted);
    border-bottom: 1px solid #eef0f5;
    padding: 0.45em 0.5em;
}

.eb-status-dist__table tbody td {
    padding: 0.7em 0.5em;
    border-bottom: 1px solid #f3f4f8;
    font-size: 0.88rem;
    color: var(--eb-dash-ink);
    vertical-align: middle;
}

.eb-status-dist__table tbody tr:last-child td {
    border-bottom: none;
}

.eb-status-dist__table .eb-legend__dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    margin-right: 0.45em;
    vertical-align: middle;
}

.eb-status-dist__footer {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.75em 1.35em;
    background: #f8fafc;
    border-top: 1px solid #eef0f5;
    color: var(--eb-dash-muted);
    font-size: 0.8rem;
}

.eb-status-dist__footer i {
    color: #4e73df;
}

.eb-panel--lifecycle {
    overflow: hidden;
}

.eb-panel__body--lifecycle {
    padding: 0.65em 0.85em 0.85em;
}

.eb-lifecycle {
    display: flex;
    align-items: stretch;
    gap: 0.6em;
    height: 13rem;
    min-width: 0;
}

.eb-lifecycle__chart {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.15em 0;
}

.eb-lifecycle__segment {
    height: 2.15rem;
    flex: 1 1 0;
    max-height: 2.4rem;
    clip-path: polygon(6% 0, 94% 0, 88% 100%, 12% 100%);
}

.eb-lifecycle__segment--1 { width: 100%; background-color: #4e73df; }
.eb-lifecycle__segment--2 { width: 88%; background-color: #1cc88a; }
.eb-lifecycle__segment--3 { width: 76%; background-color: #7dcea0; }
.eb-lifecycle__segment--4 { width: 64%; background-color: #f6c23e; }
.eb-lifecycle__segment--5 { width: 52%; background-color: #e8a0bf; }

.eb-lifecycle__list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.2em;
}

.eb-lifecycle__row {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr) auto auto;
    gap: 0.35em;
    align-items: center;
    min-width: 0;
}

.eb-lifecycle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.eb-lifecycle__label {
    font-size: 0.68rem;
    color: var(--eb-dash-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.eb-lifecycle__count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--eb-dash-ink);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.eb-lifecycle__pct {
    font-size: 0.65rem;
    color: var(--eb-dash-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
}

@media (max-width: 1199.98px) {
    .eb-lifecycle {
        height: auto;
        min-height: 11rem;
    }

    .eb-lifecycle__segment {
        height: 1.5rem;
        flex: none;
    }
}

@media (max-width: 575.98px) {
    .eb-lifecycle {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .eb-lifecycle__chart {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 8rem;
    }

    .eb-lifecycle__segment {
        height: 1.35rem;
    }
}

.eb-hbars { display: flex; flex-direction: column; gap: 0.75em; }

.eb-hbar__top {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--eb-dash-ink);
    margin-bottom: 0.3em;
}

.eb-hbar__track {
    height: 0.5rem;
    background: #eef0f5;
    border-radius: 1rem;
    overflow: hidden;
}

.eb-hbar__fill {
    height: 100%;
    border-radius: 1rem;
    background: #4e73df;
}

.eb-hbar__fill--aging { background: #36b9cc; }

.eb-chart--line { height: 13rem; }

.eb-dash-table {
    width: 100%;
    margin: 0;
    font-size: 0.82rem;
}

.eb-dash-table thead th {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    color: var(--eb-dash-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85em 1em;
    white-space: nowrap;
}

.eb-dash-table tbody td {
    padding: 0.75em 1em;
    border-bottom: 1px solid #f0f2f8;
    vertical-align: middle;
    color: var(--eb-dash-ink);
}

.eb-dash-table tbody tr:hover { background: #fafbfd; }

.eb-dash-table__link {
    color: #4e73df;
    font-weight: 600;
    text-decoration: none;
}

.eb-dash-table__action {
    color: #858796;
    padding: 0.25em;
}

.eb-status {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.eb-status--pending { background: #fff4e0; color: #d68910; }
.eb-status--info { background: #e3f5fa; color: #258391; }
.eb-status--success { background: #e6faf3; color: #169b6b; }
.eb-status--danger { background: #fdecea; color: #c0392b; }
.eb-status--warning { background: #fff8e6; color: #b7791f; }
.eb-status--muted { background: #eef0f5; color: #6c757d; }

.eb-aging {
    display: inline-block;
    padding: 0.15em 0.55em;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.eb-aging.dashboard-aging--neutral { background: #eef0f5; color: #858796; }
.eb-aging.dashboard-aging--warning { background: #fff8e6; color: #d68910; }
.eb-aging.dashboard-aging--danger { background: #fdecea; color: #e74a3b; }
.eb-aging.dashboard-aging--critical { background: #fdecea; color: #c0392b; }

.eb-dash-transactions { margin-bottom: 1.5em; }

@media (max-width: 1399.98px) {
    .eb-dash-kpi-row { grid-template-columns: repeat(4, 1fr); }

    .eb-dash-filter__row--fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .eb-dash-filter__group--date-from,
    .eb-dash-filter__group--date-to {
        grid-row: 3;
    }
}

@media (max-width: 991.98px) {
    .eb-dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .eb-dash-analytics__row--3 { grid-template-columns: 1fr; }
    .eb-status-dist {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }
    .eb-status-dist__total {
        min-height: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 0.65em;
    }
    .eb-donut--status {
        max-width: 18rem;
        margin: 0 auto;
    }
    .eb-dash-filter__row--search {
        flex-wrap: wrap;
    }
    .eb-dash-filter__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .eb-dash-filter__row--fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eb-dash-filter__group--date-from,
    .eb-dash-filter__group--date-to {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 575.98px) {
    .eb-dash-kpi-row { grid-template-columns: 1fr; }
    .eb-dash { margin: -1em -1em 0; padding: 1em; }
    .eb-dash-header {
        flex-direction: column;
    }

    .eb-dash-filter__row--fields {
        grid-template-columns: 1fr;
    }

    .eb-dash-filter__group--date-from,
    .eb-dash-filter__group--date-to {
        grid-column: auto;
    }
}

/* approval form committee table */
.approval-form {
    --af-committee-head: #e8eaf6;
}

.approval-form__committee {
    margin-bottom: 0;
    overflow: hidden;
}

.approval-form__committee-body {
    padding: 0;
}

.approval-form__committee-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.approval-form__committee-table thead th {
    background-color: var(--af-committee-head);
    color: var(--qf-gray, #5b5959);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75em 1em;
    border: 1px solid rgba(91, 89, 89, 0.2);
    text-align: center;
    vertical-align: middle;
}

.approval-form__committee-table tbody td {
    padding: 0.5em 1em;
    border: 1px solid rgba(91, 89, 89, 0.2);
    vertical-align: middle;
    background-color: #fff;
    text-align: center;
}

.approval-form__committee-table tbody td:first-child {
    font-weight: 500;
    color: var(--qf-gray, #5b5959);
}

.approval-form__committee-table tbody td:last-child {
    text-align: left;
    padding: 0.35em;
}

.approval-form__committee-table tbody td .form-control {
    width: 100%;
    min-height: 2.5rem;
    border: none;
    box-shadow: none;
    resize: vertical;
    font-size: 0.875rem;
    background-color: transparent;
}

.approval-form__committee-table tbody td .form-control:focus {
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.approval-form__committee-table .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    margin: 0;
    float: none;
    position: static;
}

.approval-form__committee-table .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.requirements-checklist-status-panel .requirement-status-checkbox {
    cursor: pointer;
}

.requirements-checklist-status-panel .custom-control.custom-checkbox {
    min-height: 1.25rem;
    padding-left: 1.5rem;
}

@media (max-width: 767.98px) {
    .approval-form__committee-table {
        font-size: 0.8125rem;
    }

    .approval-form__committee-table thead th,
    .approval-form__committee-table tbody td {
        padding: 0.5em 0.65em;
    }
}

.bond-closure-modal__content {
    border-radius: 0.35rem;
}

.bond-closure-modal__table th,
.bond-closure-modal__table td,
.bond-closure-form__table th,
.bond-closure-form__table td {
    vertical-align: middle;
}

.bond-closure-modal__summary .alert {
    margin-bottom: 0;
}

.bond-closure-modal__progress,
.bond-closure-form__progress {
    margin-top: 0.5em;
    min-width: 14rem;
}

.bond-closure-modal__progress-label {
    display: block;
    font-size: 0.8125rem;
    color: #5a5c69;
    margin-bottom: 0.35em;
}

.bond-closure-modal__progress-bar,
.bond-closure-form__progress-bar {
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: #eaecf4;
}

.bond-closure-modal__footer .btn-success:disabled,
#bond-closure-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.bond-closure-modal__unlock textarea,
.bond-closure-form__unlock textarea {
    min-height: 4rem;
}

.bond-closure-form__table .bond-closure-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.bond-closure-file-picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.bond-closure-file-display {
    cursor: pointer;
    background-color: #fff;
    width: 100%;
}

.bond-closure-file-display:focus {
    cursor: pointer;
}

.bond-closure-multi-files {
    width: 100%;
}

.bond-closure-multi-files__item {
    margin-bottom: 0.5rem;
}

.bond-closure-multi-files__item:last-child {
    margin-bottom: 0;
}

.bond-closure-multi-files__row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.35rem;
}

.bond-closure-multi-files__btns {
    display: flex;
    flex: 0 0 auto;
    gap: 0.25rem;
}

.bond-closure-slot-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    font-size: 0.95rem;
    font-weight: 700;
    border: 1px solid #d1d3e2;
    background-color: #fff;
    color: #5a5c69;
    border-radius: 0.25rem;
}

.bond-closure-add-supporting-btn {
    color: #1cc88a;
    border-color: #1cc88a;
}

.bond-closure-remove-supporting-btn {
    color: #e74a3b;
    border-color: #e74a3b;
}

.bond-closure-slot-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bond-closure-dropzone {
    position: relative;
    width: 100%;
}

.bond-closure-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.bond-closure-dropzone__area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
    border: 1px dashed #d1d3e2;
    border-radius: 0.35rem;
    background: #f8f9fc;
    color: #5a5c69;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
}

.bond-closure-dropzone__area.is-dragover {
    border-color: #4e73df;
    background: #eaecf4;
    color: #4e73df;
}

.bond-closure-dropzone__list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
}

.bond-closure-dropzone__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #3a3b45;
    padding: 0.15rem 0;
}

.bond-closure-dropzone__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bond-closure-dropzone__remove {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #e74a3b;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}

.bond-closure-form__actions .btn {
    margin-left: 0.5rem;
}

.bond-closure-form__actions .btn:first-child {
    margin-left: 0;
}

/* inward facultative approval slip form */
.approval-slip-type-radios .form-check-label {
    font-weight: 500;
    color: #5a5c69;
}

.approval-inward-form .quotation-form__section-title {
    font-size: 0.95rem;
}

.approval-inward-form #inward_exposure_table th {
    font-size: 0.8rem;
    background: #f8f9fc;
}

/* Bond Closure dashboard */
.bc-page {
    --bc-border: #e5e7eb;
    --bc-muted: #6b7280;
    --bc-ink: #1f2937;
    --bc-green: #059669;
    --bc-green-soft: #d1fae5;
    --bc-yellow: #ffcc00;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bc-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bc-page__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bc-ink);
}

.bc-page__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.45rem;
}

.bc-page__bond-no {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bc-ink);
}

.bc-badge--type {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #fff4e0;
    color: #c27803;
    font-size: 0.75rem;
    font-weight: 700;
}

.bc-page__closed-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bc-page__closed-pill strong {
    display: block;
    color: var(--bc-green);
}

.bc-page__closed-pill > div span {
    display: block;
    font-size: 0.8rem;
    color: var(--bc-muted);
}

.bc-page__closed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--bc-green-soft);
    color: var(--bc-green);
    line-height: 1;
    flex-shrink: 0;
}

.bc-page__closed-icon i {
    display: block;
    line-height: 1;
    width: 1em;
    height: 1em;
    font-size: 0.85rem;
    text-align: center;
}

.bc-summary-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.bc-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bc-summary-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    background: #fff8db;
    color: #2f2e2e;
    flex: 0 0 auto;
}

.bc-summary-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bc-muted);
}

.bc-summary-card__value {
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bc-ink);
    word-break: break-word;
}

.bc-summary-card__hint {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--bc-muted);
}

.bc-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.bc-status.is-closed {
    background: var(--bc-green-soft);
    color: var(--bc-green);
}

.bc-status.is-open {
    background: #e8f1ff;
    color: #2f6fed;
}

.bc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(17rem, 0.75fr);
    gap: 1rem;
    align-items: start;
}

.bc-layout__main,
.bc-layout__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.bc-card {
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 1rem 1.1rem;
}

.bc-card--danger {
    border-color: #fecaca;
    background: #fff7f7;
}

.bc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.bc-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bc-ink);
}

.bc-card__meta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bc-muted);
}

.bc-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.bc-stepper__item {
    flex: 1 1 0;
    min-width: 6.5rem;
    text-align: center;
}

.bc-stepper__node {
    width: 1.85rem;
    height: 1.85rem;
    margin: 0 auto 0.45rem;
    border-radius: 999px;
    border: 2px solid #d1d5db;
    background: #fff;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.bc-stepper__item.is-done .bc-stepper__node,
.bc-stepper__item.is-current .bc-stepper__node {
    border-color: var(--bc-green);
    background: var(--bc-green);
    color: #fff;
}

.bc-stepper__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bc-ink);
    line-height: 1.25;
}

.bc-stepper__date {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--bc-muted);
}

.bc-stepper__line {
    flex: 0.35 0 auto;
    height: 3px;
    margin-top: 0.85rem;
    background: #e5e7eb;
    border-radius: 999px;
    min-width: 1.25rem;
}

.bc-stepper__line.is-done {
    background: var(--bc-yellow);
}

.bc-table-wrap {
    border: 1px solid var(--bc-border);
    border-radius: 0.65rem;
    overflow: auto;
}

.bc-table {
    margin: 0;
    background: transparent;
    background-color: transparent;
}

.bc-table.table,
.bond-closure-form__table.table {
    background-color: transparent;
}

.bc-table thead th {
    background: transparent;
    border-bottom: 1px solid var(--bc-border);
    color: var(--bc-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 0.7rem 0.8rem;
}

.bc-table tbody tr,
.bc-table tbody tr:hover,
.bc-table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
    background-color: transparent;
}

.bc-table tbody td {
    padding: 0.8rem;
    border-top: 1px solid #f1f3f5;
    font-size: 0.875rem;
    color: var(--bc-ink);
    vertical-align: middle;
}

.bc-doc-status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.bc-doc-status--verified {
    background: var(--bc-green-soft);
    color: var(--bc-green);
}

.bc-doc-status--uploaded {
    background: #e8f1ff;
    color: #2f6fed;
}

.bc-doc-status--missing,
.bc-doc-status--submitted {
    background: #eef0f5;
    color: #6c757d;
}

.bc-file-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.bc-file-link:hover {
    text-decoration: underline;
}

.bc-docs-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.bc-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    font-size: 0.9rem;
}

.bc-note--success {
    background: var(--bc-green-soft);
    color: #065f46;
}

.bc-note--info {
    background: #e8f1ff;
    color: #1e3a8a;
}

.bc-note--muted {
    background: #f3f4f6;
    color: #4b5563;
}

.bc-summary-list {
    margin: 0;
}

.bc-summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.bc-summary-list > div:last-child {
    border-bottom: none;
}

.bc-summary-list dt {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bc-muted);
    font-weight: 600;
}

.bc-summary-list dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bc-ink);
    text-align: right;
}

.bc-donut-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.bc-donut {
    --bc-percent: 0;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--bc-green) calc(var(--bc-percent) * 1%), #e5e7eb 0);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    position: relative;
}

.bc-donut::before {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border-radius: 50%;
    background: #fff;
}

.bc-donut span {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--bc-ink);
}

.bc-donut-copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bc-muted);
    line-height: 1.4;
}

.bc-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.85rem;
    border-left: 2px solid #d1fae5;
}

.bc-timeline li {
    position: relative;
    padding: 0 0 0.95rem 0.95rem;
}

.bc-timeline li:last-child {
    padding-bottom: 0;
}

.bc-timeline li::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0.2rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--bc-green);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #a7f3d0;
}

.bc-timeline__date {
    display: block;
    font-size: 0.75rem;
    color: var(--bc-muted);
}

.bc-timeline__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--bc-muted);
    font-weight: 500;
}


@media (max-width: 1199.98px) {
    .bc-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bc-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .bc-summary-row {
        grid-template-columns: 1fr;
    }
}

/* Approval Status Report */
.asr-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.asr-summary__chip {
    background: #fff;
    border: 1px solid var(--bsr-border, #e3e6f0);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.asr-summary__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bsr-muted, #858796);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.asr-summary__value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--bsr-ink, #1f2a44);
}

.asr-summary__chip--pending { border-left: 4px solid #f6c23e; }
.asr-summary__chip--approved { border-left: 4px solid #1cc88a; }
.asr-summary__chip--disapproved { border-left: 4px solid #e74a3b; }

.asr-report-card {
    overflow: visible;
}

.asr-report-card .bsr-table-wrap {
    max-height: none;
    min-height: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: clip;
}

.asr-table-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #edf0f7;
    color: #858796;
    font-size: 0.78rem;
}

.asr-table {
    min-width: 1080px;
}

.asr-table > tbody > .asr-record-row > td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: middle;
}

.asr-record-row.is-expanded {
    background: #fffdf5;
}

.asr-table__expander {
    width: 2.25rem;
    min-width: 2.25rem;
    padding-left: 0.65rem !important;
    padding-right: 0.25rem !important;
}

.asr-expand-btn {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #858796;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.asr-expand-btn:hover,
.asr-expand-btn:focus {
    outline: none;
    background: #fff3bf;
    color: #7a6200;
}

.asr-expand-btn i {
    font-size: 0.65rem;
    transition: transform 0.18s ease;
}

.asr-expand-btn[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.asr-count {
    font-weight: 700;
    color: #3a3b45;
}

.asr-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #e3e6f0;
    border-radius: 0.45rem;
    color: #5a5c69;
    background: #fff;
    font-size: 0.76rem;
    font-weight: 600;
}

.asr-view-btn:hover {
    color: #3a3b45;
    background: #f8f9fc;
    text-decoration: none;
}

.asr-timeline {
    display: flex;
    align-items: flex-start;
}

.asr-timeline--compact {
    min-width: 8rem;
}

.asr-timeline__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 2.75rem;
    color: #858796;
}

.asr-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.58rem;
    left: calc(50% + 0.58rem);
    right: calc(-50% + 0.58rem);
    height: 2px;
    background: #d9dce5;
}

.asr-timeline__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.18rem;
    height: 1.18rem;
    border: 2px solid #d9dce5;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    font-size: 0.5rem;
}

.asr-timeline__step--approved .asr-timeline__dot,
.asr-member__index--approved {
    border-color: #1cc88a;
    background: #1cc88a;
    color: #fff;
}

.asr-timeline__step--disapproved .asr-timeline__dot,
.asr-member__index--disapproved {
    border-color: #e74a3b;
    background: #e74a3b;
    color: #fff;
}

.asr-timeline__step--pending .asr-timeline__dot,
.asr-member__index--pending {
    border-color: #f6c23e;
    background: #fff;
    color: #9b7800;
}

.asr-timeline__step small {
    margin-top: 0.25rem;
    font-size: 0.62rem;
}

.asr-timeline__empty,
.asr-detail-empty {
    color: #858796;
    font-size: 0.75rem;
}

.asr-detail-row > td {
    padding: 0 !important;
    background: #fffdf7;
    border-top: 0 !important;
}

.asr-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.55fr 1fr;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem 1rem;
    border-top: 1px solid #f4e7b3;
}

.asr-detail-section h3 {
    margin: 0 0 0.8rem;
    color: #5a5c69;
    font-size: 0.78rem;
    font-weight: 700;
}

.asr-member-list {
    display: grid;
    gap: 0.65rem;
}

.asr-member {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.asr-member__index {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    border: 2px solid #d9dce5;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
}

.asr-member__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.asr-member__body strong {
    overflow: hidden;
    color: #3a3b45;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asr-member__body small {
    color: #858796;
    font-size: 0.67rem;
}

.asr-timeline--expanded {
    padding-top: 0.2rem;
}

.asr-timeline--expanded .asr-timeline__step strong {
    max-width: 7rem;
    margin-top: 0.35rem;
    overflow: hidden;
    color: #5a5c69;
    font-size: 0.66rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asr-timeline--expanded .asr-timeline__step small {
    color: #858796;
    font-size: 0.58rem;
    text-align: center;
}

.asr-detail-list {
    margin: 0;
}

.asr-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.26rem 0;
    font-size: 0.7rem;
}

.asr-detail-list dt {
    color: #858796;
    font-weight: 500;
}

.asr-detail-list dd {
    margin: 0;
    color: #3a3b45;
    font-weight: 600;
    text-align: right;
}

.asr-remarks {
    display: flex;
    gap: 0.75rem;
    margin: 0 1.5rem 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #f4df8f;
    border-radius: 0.55rem;
    background: #fff9dd;
    color: #7a6200;
}

.asr-remarks > i {
    margin-top: 0.15rem;
}

.asr-remarks strong {
    display: block;
    font-size: 0.72rem;
}

.asr-remarks p {
    margin: 0.15rem 0 0;
    color: #6c5a13;
    font-size: 0.7rem;
}

@media (max-width: 991.98px) {
    .asr-summary {
        grid-template-columns: 1fr;
    }

    .asr-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Processing Timelines Report */
.ptr-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.ptr-summary__card {
    background: #fff;
    border: 1px solid var(--bsr-border, #e3e6f0);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ptr-summary__card--average { border-left: 4px solid #4e73df; }
.ptr-summary__card--minimum { border-left: 4px solid #1cc88a; }
.ptr-summary__card--maximum { border-left: 4px solid #e74a3b; }

.ptr-summary__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bsr-muted, #858796);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ptr-summary__headline {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.ptr-summary__headline-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bsr-ink, #1f2a44);
    line-height: 1.1;
}

.ptr-summary__headline-unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bsr-muted, #858796);
}

.ptr-summary__headline-label {
    font-size: 0.72rem;
    color: var(--bsr-muted, #858796);
}

.ptr-summary__metrics {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid #edf0f7;
    display: grid;
    gap: 0.3rem;
}

.ptr-summary__metrics > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.ptr-summary__metrics dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: #858796;
}

.ptr-summary__metrics dd {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: #3a3b45;
}

.ptr-report-card {
    overflow: visible;
}

.ptr-report-card .bsr-table-wrap {
    max-height: none;
    min-height: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: clip;
}

.ptr-table-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #edf0f7;
    color: #858796;
    font-size: 0.78rem;
}

.ptr-table {
    min-width: 1180px;
}

.ptr-table > tbody > tr > td {
    vertical-align: middle;
}

.ptr-table__sub {
    display: block;
    color: #858796;
    font-size: 0.7rem;
    font-weight: 500;
}

.ptr-duration {
    font-weight: 600;
    color: #5a5c69;
}

.ptr-duration--total {
    font-weight: 700;
    color: #3a3b45;
}

.ptr-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #e3e6f0;
    border-radius: 0.45rem;
    color: #5a5c69;
    background: #fff;
    font-size: 0.76rem;
    font-weight: 600;
}

.ptr-view-btn:hover {
    color: #3a3b45;
    background: #f8f9fc;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .ptr-summary {
        grid-template-columns: 1fr;
    }
}