html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    background-image: url('../images/Logo.png');
    background-size: contain;
    width: 188px;
    height: 35px;
}

.loading-image {
    height: 70px;
    width: 70px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.sidebar {
    min-width: 220px !important;
    width: 220px !important;
}

.xaf-navmenu a .xaf-nav-link { text-decoration: revert !important; }

.table-sm,
.table-sm td,
.table-sm th { font-size: .8125rem; }

.dxbs-grid-header-content { font-size: .7rem; }

/* Hide only the icon, keep the text */
svg.dxbl-grid-empty-data-not-found { display: none !important; }

/* Change empty data text */
span.dxbl-grid-empty-data-not-found {
    visibility: hidden;
}
span.dxbl-grid-empty-data-not-found::after {
    visibility: visible;
    content: "No stock currently available";
}

/* Match ListView empty data styling for CardView */
.card-empty-data {
    text-align: center;
    padding: 48px 24px; /* Match ListView padding exactly */
    color: #787878;
    font-size: 0.77rem;
    font-weight: 600;
}

/* Also style the main content when showing empty state in CardView */
.main-content.xaf-flex-auto {
    text-align: center;
    color: rgb(22, 22, 22); /* Match ListView color exactly */
    font-size: 14px;
    padding: 48px 24px; /* Match ListView padding exactly */
}

/* Override Bootstrap classes in CardView empty state to match ListView exactly */
.text-center.text-muted.p-4 {
    color: rgb(22, 22, 22) !important; /* Match ListView color exactly */
    padding: 48px 24px !important; /* Match ListView padding exactly */
    font-size: 14px !important;
}

/* Enhanced filter row styling for better discoverability */
.dxbl-grid-filter-row {
    background-color: #fffef0 !important; /* Very light pastel yellow background */
}

.dxbl-grid-filter-row td {
    position: relative;
}

.dxbl-grid-filter-row td:not(.dxbl-grid-empty-cell)::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999999'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    opacity: 0.3;
    pointer-events: none; /* Ensures it's not clickable */
    z-index: 1;
}

/* Remove yellow background from empty filter cells */
.dxbl-grid-filter-row td.dxbl-grid-empty-cell {
    background-color: white !important;
}

/* Ensure input fields appear above the watermark */
.dxbl-grid-filter-row input {
    position: relative;
    z-index: 2;
    background-color: transparent !important;
}

.fss-custom-grid td.dxbl-grid-detail-cell {
    border-width: 1px !important;
    border-left-width: 0 !important;
    border-right-width: 1px !important;
    border-top-width: 0 !important;
    border-bottom-width: 1px !important;
    padding: 5px 15px 15px !important;
}

.fss-custom-grid td:nth-last-child(2) { border-right-width: 1px !important; }

.fss-custom-grid th { font-size: .7rem !important; }

.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-group-footer-row > td > div, .dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td > div, .dxbl-grid .dxbl-grid-table > thead > tr > th span {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere !important;
}

button[title="Sign up"], [title="Reset password"] {
    background-color: #1a75bb;
    border-color: #1a75bb;
    color: white;
}

button[title="Sign up"]:not(.dxbl-disabled):not(:disabled):hover, [title="Reset password"]:not(.dxbl-disabled):not(:disabled):hover {
    border-color: #1a75bb;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    background-color: #1a75bb !important;
    color: white !important;
}

.dxbl-btn[data-action-name^="View Enquiry"] {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

.dxbl-btn[data-action-name^="View enquiry"]:hover:not(.dxbl-disabled):not(:disabled) {
    background-color: #157347 !important;
    border-color: #146c43 !important;
    color: white !important;
}

.dxbl-btn[data-action-name^="View enquiry"]:focus {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5) !important;
}

.dxbl-btn[data-action-name^="Send Enquiry"] {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

.dxbl-btn[data-action-name^="Send Enquiry"]:hover:not(.dxbl-disabled):not(:disabled) {
    background-color: #157347 !important;
    border-color: #146c43 !important;
    color: white !important;
}

.dxbl-btn[data-action-name^="Send Enquiry"]:focus {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5) !important;
}

/* Ensure hand cursor on all DevExpress buttons */
.dxbl-btn {
    cursor: pointer !important;
}