@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    color-scheme: light;
    --cg-page-bg: #f4f6f9;
    --cg-surface: #ffffff;
    --cg-surface-subtle: #f2f5fa;
    --cg-surface-raised: #fbfcfe;
    --cg-text: #172033;
    --cg-text-secondary: #667085;
    --cg-border: #dfe3e8;
    --cg-accent: #1769ff;
    --cg-accent-soft: #eaf0ff;
    --cg-hover: #f2f6ff;
    --cg-selected: #eaf0ff;
    --cg-danger-text: #b42318;
    --cg-success-text: #067647;
    --cg-warning-text: #98600a;
    --cg-info-text: #175cd3;
    --cg-success-soft: #e8f7ef;
    --cg-danger-soft: #fff0ee;
    --cg-warning-soft: #fff6db;
    --cg-info-soft: #edf4ff;
    --cg-shadow-color: rgb(15 23 42 / 16%);
    --cg-shadow: 0 16px 38px var(--cg-shadow-color);
}

html[data-bs-theme="dark"] {
    color-scheme: dark;
    --cg-page-bg: #0f141c;
    --cg-surface: #151b24;
    --cg-surface-subtle: #1e2734;
    --cg-surface-raised: #19212c;
    --cg-text: #e6edf7;
    --cg-text-secondary: #9aa8bc;
    --cg-border: #354052;
    --cg-accent: #60a5fa;
    --cg-accent-soft: #17375f;
    --cg-hover: #202d3d;
    --cg-selected: #17375f;
    --cg-danger-text: #fda29b;
    --cg-success-text: #75d9a8;
    --cg-warning-text: #f9d275;
    --cg-info-text: #93c5fd;
    --cg-success-soft: #113526;
    --cg-danger-soft: #461b1e;
    --cg-warning-soft: #3d3015;
    --cg-info-soft: #172f52;
    --cg-shadow-color: rgb(0 0 0 / 38%);
    --cg-shadow: 0 16px 38px var(--cg-shadow-color);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--cg-text);
    background-color: var(--cg-page-bg);
}

body,
.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.list-group-item,
.table {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .list-group-item {
    background-color: var(--cg-surface) !important;
    border-color: var(--cg-border) !important;
    color: var(--cg-text);
}

html[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--cg-surface-subtle);
    --bs-table-color: var(--cg-text);
    --bs-table-border-color: var(--cg-border);
}

/* The access-administration screens are under active development in this
   worktree. Keep their user-owned scoped styles intact while providing the
   same dark semantic palette from the global theme layer. */
html[data-bs-theme="dark"] :is(.access-admin-page, .access-dialog, .confirmation) {
    color: var(--cg-text) !important;
}

html[data-bs-theme="dark"] :is(.access-admin-header, .selected-summary) {
    border-color: var(--cg-border) !important;
    background: linear-gradient(135deg, var(--cg-accent-soft), var(--cg-surface) 72%) !important;
}

html[data-bs-theme="dark"] :is(
    .access-surface,
    .access-stat,
    .dialog-section,
    .assignment-row,
    .flag-panel,
    .access-button--secondary,
    .access-button--danger-outline,
    .icon-button,
    .quick-button,
    .assignment-total) {
    border-color: var(--cg-border) !important;
    background: var(--cg-surface) !important;
}

html[data-bs-theme="dark"] :is(.dialog-section--add, .access-grid-alt-row > td) {
    background: var(--cg-surface-raised) !important;
}

html[data-bs-theme="dark"] .access-grid .dxbl-grid-header-row > td {
    color: var(--cg-text-secondary) !important;
    background: var(--cg-surface-subtle) !important;
}

html[data-bs-theme="dark"] :is(
    .access-admin-title h1,
    .access-stat strong,
    .access-toolbar-copy h2,
    .section-heading h4,
    .selected-summary h3,
    .confirmation h3,
    .identity-copy strong,
    .assignment-copy strong,
    .picker-option strong) {
    color: var(--cg-text) !important;
}

html[data-bs-theme="dark"] :is(
    .access-admin-title p,
    .access-toolbar-copy span,
    .access-stat span,
    .section-heading p,
    .selected-summary p,
    .confirmation p,
    .identity-copy small,
    .assignment-copy small,
    .picker-option small,
    .field-label,
    .flag-grid label,
    .access-state,
    .empty-state) {
    color: var(--cg-text-secondary) !important;
}

html[data-bs-theme="dark"] :is(.user-avatar, .item-icon, .assignment-count, .pending-chip, .edit-banner, .flag-chip) {
    border-color: var(--cg-border) !important;
    color: var(--cg-accent) !important;
    background: var(--cg-accent-soft) !important;
}

html[data-bs-theme="dark"] .status-pill--active {
    color: var(--cg-success-text) !important;
    background: var(--cg-success-soft) !important;
}

html[data-bs-theme="dark"] :is(.status-pill--inactive, .flag-chip--none) {
    color: var(--cg-text-secondary) !important;
    background: var(--cg-surface-subtle) !important;
}

/* RTL - move separator to after instead of before */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::after {
    content: var(--bs-breadcrumb-divider, "/");
    padding-inline-end: var(--bs-breadcrumb-item-padding-x, 0.5rem);
    padding-inline-start: 0;
    color: var(--bs-secondary-color);
    float: right;
}

.badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

    .badge.bg-success {
        background-color: #28a745;
        color: white;
    }

    .badge.bg-info {
        background-color: #17a2b8;
        color: white;
    }

    .badge.bg-warning {
        background-color: #ffc107;
        color: #212529;
    }

    .badge.bg-primary {
        background-color: #007bff;
        color: white;
    }

    .badge.bg-danger {
        background-color: #dc3545;
        color: white;
    }

    .badge.bg-secondary {
        background-color: #6c757d;
        color: white;
    }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
}
.custclass {
    overflow-y: auto;
}
.alt-item > td {
    background-color: color-mix(in srgb, var(--cg-text) 5%, transparent);
}

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

.gridlayout-item {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    height: 100%;
    padding-top: 10px;
    text-align: center;
    position: relative;
    z-index: 0;
}

    .gridlayout-item:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.6;
    }
@media (max-width: 768px) { /* Small screens (tablets, phones) */
    .dx-window {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: 300px !important;
        height: auto;
    }
}


/* Custom Toast Styles */
.custom-success-toast {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    border-left: 4px solid #28a745 !important;
}

.custom-error-toast {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
    border-left: 4px solid #dc3545 !important;
}

.custom-info-toast {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
    border-left: 4px solid #17a2b8 !important;
}

.custom-warning-toast {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
    border-left: 4px solid #ffc107 !important;
}

/* Connection status badges */
.badge {
    font-size: 0.75em;
    font-weight: 500;
}

.top-row {
    border-bottom: 1px solid var(--cg-border);
}

/* Error boundary styling */
.alert-danger details {
    margin-top: 1rem;
}

.alert-danger summary {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.alert-danger pre {
    background-color: rgba(0,0,0,0.1);
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    max-height: 300px;
}

.rtl-edit-form-fix {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    direction: ltr !important;
}


/* Complete RTL Popup Fix - Add to site.css */

/* Fix popup positioning */
.rtl-popup-fix {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

    /* Fix ALL content inside popup to RTL */
    .rtl-popup-fix .dxbs-popup-content,
    .rtl-popup-fix .dxbs-popup-body,
    .rtl-popup-fix .dxbs-popup-header,
    .rtl-popup-fix .dxbs-popup-footer {
        direction: rtl !important;
        text-align: right !important;
    }

    /* Fix form layouts */
    .rtl-popup-fix .dxbs-fl,
    .rtl-popup-fix .dxbs-fl-item {
        direction: rtl !important;
    }

    /* Fix labels - appear on right */
    .rtl-popup-fix .dxbs-fl-item-caption,
    .rtl-popup-fix label {
        text-align: right !important;
        direction: rtl !important;
    }

    /* Fix all input fields */
    .rtl-popup-fix input,
    .rtl-popup-fix textarea,
    .rtl-popup-fix select,
    .rtl-popup-fix .form-control,
    .rtl-popup-fix .dxbs-editor,
    .rtl-popup-fix .dxbs-textbox {
        direction: rtl !important;
        text-align: right !important;
    }

    /* Fix buttons alignment */
    .rtl-popup-fix .dxbs-popup-footer {
        direction: rtl !important;
        justify-content: flex-start !important;
    }

    /* Fix close button position */
    .rtl-popup-fix .dxbs-popup-close-button {
        left: 10px !important;
        right: auto !important;
    }

.btn-logout span,
.btn-login span {
    display: none; /* Show icon only */
}

.btn-logout, .btn-login {
    padding: 0.5rem;
    min-width: 40px;
    justify-content: center;
}

/* Workflow profiles supply Bootstrap button classes. Keep their foreground and
   background paired on the Cg menu items, including hover and keyboard focus.
   Global scope also covers the menu when its flyout is portaled. */
/* Profiles often supply pill classes (badge bg-*), which touch each other and the menu
   edge without a gap. */
.cg-button-menu:has(> .po-workflow-action) {
    gap: 4px;
    padding: 4px;
}

.cg-button-menu .cg-button-menu__item.po-workflow-action {
    background: var(--bs-btn-bg, var(--cg-surface, #fff));
    color: var(--bs-btn-color, var(--cg-text, #172033));
    font-weight: 600;
}

.cg-button-menu .cg-button-menu__item.po-workflow-action:hover,
.cg-button-menu .cg-button-menu__item.po-workflow-action:focus-visible {
    background: var(--bs-btn-hover-bg, var(--cg-surface-subtle, #f2f5fa));
    color: var(--bs-btn-hover-color, var(--cg-text, #172033));
}

.cg-button-menu .cg-button-menu__item.po-workflow-action:focus-visible {
    outline: 2px solid var(--cg-accent, #1769ff);
    outline-offset: -2px;
}