@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap");

html,
body {
    height: 100%;
}

body {
    margin: 0;
}

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

.authenticated-user-inline-name {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    position: fixed;
    top: 0.9rem;
    right: 4.4rem;
    z-index: 1200;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2rem 0.35rem;
    font-family: "Barlow", sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 600;
    color: #ffffff;
    pointer-events: none;
}

@media (max-width: 768px) {
    .authenticated-user-inline-name {
        top: 0.8rem;
        right: 4rem;
        max-width: 160px;
        font-size: 0.72rem;
    }
}

/* =========================================================
   Branding global
   ========================================================= */

.dxbl-theme-fluent .app .header,
.dxbl-theme-fluent .logon-template-header,
.header {
    background: #0067a2 !important;
}

.header-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
}

    .header-logo::before {
        content: "";
        flex-shrink: 0;
        width: 28px;
        height: 24px;
        background-color: currentColor;
        -webkit-mask: url("../images/Logo.svg") center / contain no-repeat;
        mask: url("../images/Logo.svg") center / contain no-repeat;
    }

    .header-logo::after {
        content: "MERCONS";
        font-family: "Barlow", sans-serif;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.18em;
        line-height: 1;
    }

.loading-caption {
    color: #0067a2 !important;
}

.dxbl-theme-fluent .main-ribbon-template.app,
.account-container {
    color: #ffffff;
}

.dxbl-theme-fluent .app.main-ribbon-template .header .xaf-image {
    background-color: #ffffff !important;
}

/* =========================================================
   Splash / loading
   ========================================================= */

img[src$="SplashScreen.svg"] {
    margin-top: 10px;
    width: 90px;
    height: auto;
}

.xaf-splash-screen-caption,
.xaf-splash-screen-title,
.xaf-splash-screen-text,
.dxbl-splash-screen-caption,
.dxbl-splash-screen-title,
.dxbl-splash-screen-text,
.xaf-splash-screen .xaf-splash-screen-caption,
.xaf-splash-screen .xaf-splash-screen-title,
.xaf-splash-screen .xaf-splash-screen-text,
.dxbl-splash-screen .dxbl-splash-screen-caption,
.dxbl-splash-screen .dxbl-splash-screen-title,
.dxbl-splash-screen .dxbl-splash-screen-text {
    color: #0067a2 !important;
}

    .xaf-splash-screen-caption *,
    .xaf-splash-screen-title *,
    .xaf-splash-screen-text *,
    .dxbl-splash-screen-caption *,
    .dxbl-splash-screen-title *,
    .dxbl-splash-screen-text * {
        color: #0067a2 !important;
    }

body .xaf-splash-screen,
body .dxbl-splash-screen,
body .xaf-splash-screen *,
body .dxbl-splash-screen * {
    color: #0067a2 !important;
}

body .dxbl-theme-fluent .xaf-splash-screen-caption,
body .dxbl-theme-fluent .dxbl-splash-screen-caption,
body .dxbl-theme-fluent .xaf-splash-screen-title,
body .dxbl-theme-fluent .dxbl-splash-screen-title,
body .dxbl-theme-fluent .xaf-splash-screen-text,
body .dxbl-theme-fluent .dxbl-splash-screen-text {
    color: #0067a2 !important;
}

/* =========================================================
   Blazor error UI
   ========================================================= */

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

/* =========================================================
   Encomendas
   ========================================================= */

.encomendas-grid,
.encomendas-grid * {
    color: #1f2328;
}

    .encomendas-grid .dxbl-grid-cell,
    .encomendas-grid .dxbl-grid-group-row {
        color: #1f2328;
    }

    .encomendas-grid tr:has(.row-adjudicado-marker) td {
        background-color: #f3f3f3;
        color: #666;
    }

    .encomendas-grid .row-adjudicado-marker {
        display: none;
    }

    .encomendas-grid .quantidade-edit {
        width: 110px;
    }

.encomendas-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 8px;
}

.encomendas-validation {
    color: #b00020;
    margin-top: 6px;
    text-align: right;
}

.encomendas-empty {
    padding: 12px;
    color: #1f2328;
}

.popup-cancel {
    margin-left: 12px;
}

.encomendas-tabs {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #cfd6de;
    background: #ffffff;
}

.encomendas-dx-tabs {
    min-height: 220px;
    border: 1px solid #cfd6de;
    background: #ffffff;
}

    .encomendas-dx-tabs .dxbl-tabs {
        margin-bottom: 8px;
        border-bottom: 1px solid #cfd6de;
    }

        .encomendas-dx-tabs .dxbl-tabs .dxbl-tab {
            margin-right: 4px;
            padding: 6px 12px;
            border: 1px solid #cfd6de;
            border-bottom: none;
            background: #f2f4f7;
        }

            .encomendas-dx-tabs .dxbl-tabs .dxbl-tab.dxbl-tab-active {
                background: #ffffff;
                font-weight: 600;
            }

    .encomendas-dx-tabs .dxbl-tab-content {
        padding: 10px;
        border: 1px solid #cfd6de;
        background: #ffffff;
    }

.encomendas-justificacoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid #cfd6de;
    background: #ffffff;
}

.encomendas-justificacao-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e1e6ec;
}

.encomendas-justificacao-title {
    font-weight: 600;
    white-space: nowrap;
}

.encomendas-justificacao-input {
    width: 100%;
    max-width: none;
    min-height: 86px;
    margin-bottom: 2px;
    padding: 4px;
    border: 1px solid #cfd6de;
    border-radius: 0;
}

    .encomendas-justificacao-input textarea {
        min-height: 86px;
        padding-top: 2px;
        padding-right: 2px;
        padding-left: 2px;
        vertical-align: top;
    }

.encomendas-info {
    color: #0f5132;
    margin-top: 6px;
    text-align: right;
}

.encomendas-group-count {
    color: #4b5b6a;
    white-space: nowrap;
    font-size: 12px;
}

.encomendas-grid {
    margin-top: 4px;
    border: 1px solid #cfd6de;
}

    .encomendas-grid .dxbl-grid-header {
        background: #f2f4f7;
        border-bottom: 1px solid #cfd6de;
    }

    .encomendas-artigos-grid .dxbl-grid-header-content,
    .encomendas-artigos-grid .dxbl-grid-header-caption {
        font-size: 12px;
    }

    .encomendas-artigos-grid .dxbl-grid-data-cell,
    .encomendas-artigos-grid .dxbl-grid-group-row td {
        font-size: 12px;
    }

    .encomendas-artigos-grid ::-webkit-scrollbar {
        height: 10px;
    }

    .encomendas-artigos-grid ::-webkit-scrollbar-track {
        background: #eef2f6;
    }

    .encomendas-artigos-grid ::-webkit-scrollbar-thumb {
        background: #8d99a6;
        border-radius: 999px;
    }

/* =========================================================
   Transition roles
   ========================================================= */

.transition-roles-editor {
    padding: 12px;
    border: 1px solid #cfd6de;
    background: #ffffff;
}

.transition-roles-grid {
    border: 1px solid #cfd6de;
}

.transition-roles-grid .dxbl-grid-header {
    background: #f2f4f7;
    border-bottom: 1px solid #cfd6de;
}

.transition-roles-grid .dxbl-grid-command-cell {
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
}

.transition-roles-grid .dxbl-grid-command-cell .dxbl-btn {
    min-width: 38px;
    padding-left: 4px;
    padding-right: 4px;
}

.transition-roles-empty {
    padding: 12px;
    color: #6b7280;
}

/* =========================================================
   Aprovações
   ========================================================= */

.aprovacoes-view-item-actions {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 330px;
}

.aprovacoes-view-item-btn {
    flex: 1 1 0;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #cfd6de;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2328;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .aprovacoes-view-item-btn:hover:not(:disabled) {
        border-color: #9aa7b5;
        background: #f6f8fa;
    }

    .aprovacoes-view-item-btn:disabled {
        opacity: 1;
        cursor: default;
    }

    .aprovacoes-view-item-btn.approval-approve.active {
        background: #e7f6ec;
        border-color: #6ca57b;
        color: #1d6b37;
    }

    .aprovacoes-view-item-btn.approval-reject.active {
        background: #fdecec;
        border-color: #d28b8b;
        color: #a12626;
    }

    .aprovacoes-view-item-btn.approval-clarify.active {
        background: #fff5dd;
        border-color: #d7b35f;
        color: #8a6500;
    }

@media (max-width: 768px) {
    .aprovacoes-view-item-actions {
        flex-direction: column;
        align-items: stretch;
        min-width: 120px;
    }

    .aprovacoes-view-item-btn {
        width: 100%;
        min-height: 34px;
        padding: 7px 8px;
        font-size: 11px;
    }
}
/* Aprovar - Verde */
.aprovacoes-view-item-btn.approval-approve {
    background-color: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

    .aprovacoes-view-item-btn.approval-approve:hover:not(:disabled) {
        background-color: #218838;
        border-color: #218838;
    }

/* Rejeitar - Vermelho */
.aprovacoes-view-item-btn.approval-reject {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

    .aprovacoes-view-item-btn.approval-reject:hover:not(:disabled) {
        background-color: #c82333;
        border-color: #c82333;
    }

/* Em Clarificação - Laranja */
.aprovacoes-view-item-btn.approval-clarify {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #ffffff;
}

    .aprovacoes-view-item-btn.approval-clarify:hover:not(:disabled) {
        background-color: #e96b0c;
        border-color: #e96b0c;
    }

/* =========================================================
   Grids - comportamento de texto
   ========================================================= */

.dxbl-grid .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-header-caption {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.dxbl-grid .dxbl-grid-data-cell,
.dxbl-grid .dxbl-grid-group-row td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   Ajustes XAF
   ========================================================= */

div.xaf-caption-container > span.xaf-object-caption,
span.xaf-object-caption {
    display: none !important;
}

/* =========================================================
   Estilos específicos
   ========================================================= */

.artigos-detail-azul {
    background-color: #E6EDF3;
}


/* =========================================================
   State property behaviors
   ========================================================= */

.state-property-behaviors-editor {
    padding: 12px;
    border: 1px solid #cfd6de;
    background: #ffffff;
}

.state-property-behaviors-grid {
    border: 1px solid #cfd6de;
}

.state-property-behaviors-grid .dxbl-grid-header {
    background: #f2f4f7;
    border-bottom: 1px solid #cfd6de;
}

.state-property-behaviors-grid .dxbl-grid-command-cell {
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
}

.state-property-behaviors-grid .dxbl-grid-command-cell .dxbl-btn {
    min-width: 38px;
    padding-left: 4px;
    padding-right: 4px;
}

.state-property-behaviors-empty {
    padding: 12px;
    color: #6b7280;
}

/* =========================================================
   Ícones menu e tabs
   ========================================================= */

:root {
    --mercons-icon-blue-filter: brightness(0) saturate(100%) invert(25%) sepia(91%) saturate(1704%) hue-rotate(182deg) brightness(92%) contrast(101%);
    --mercons-icon-white-filter: brightness(0) saturate(100%) invert(100%);
}

.dxbl-theme-fluent .xaf-nav-menu-item-icon.dxbl-image,
.dxbl-theme-fluent .xaf-layout-tab-icon.dxbl-image,
.dxbl-theme-fluent .xaf-caption-icon.dxbl-image,
.dxbl-theme-fluent .xaf-context-menu-item-icon.dxbl-image {
    filter: var(--mercons-icon-blue-filter) !important;
    opacity: 1 !important;
}

.dxbl-theme-fluent .dxbl-tab.dxbl-tab-active .xaf-layout-tab-icon.dxbl-image,
.dxbl-theme-fluent .dxbl-tab.active .xaf-layout-tab-icon.dxbl-image,
.dxbl-theme-fluent .dxbl-tab.dx-state-selected .xaf-layout-tab-icon.dxbl-image,
.dxbl-theme-fluent .dx-state-selected .xaf-nav-menu-item-icon.dxbl-image,
.dxbl-theme-fluent .active .xaf-nav-menu-item-icon.dxbl-image,
.dxbl-theme-fluent .dxbl-accordion-item-active .xaf-nav-menu-item-icon.dxbl-image {
    filter: var(--mercons-icon-white-filter) !important;
    opacity: 1 !important;
}

/*input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}*/

button[aria-label^="Increment by"],
button[aria-label^="Decrement by"] {
    display: none !important;
}

.hide-spin-buttons .dxbl-spin-btn-group,
.hide-spin-buttons .dxbl-edit-btn-spin {
    display: none !important;
}