/* Base layout styles for XAF Blazor application */
html, body {
    height: 100%;
}

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

/* N2C Logo styling */
.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    /*-webkit-mask: url('../images/Logo.svg');*/
    /*mask: url('../images/Logo.svg');*/
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
    height: 24px;
}

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

/* N2C Theme Enhancements for XAF Components */

.btn-primary:hover,
.dxbl-btn-primary:hover {
    background-color: #085050;
    border-color: #085050;
}

.btn-primary:focus,
.dxbl-btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(10, 89, 89, 0.25);
}

/* Link colors consistent with N2C brand */
a {
    color: #0A5959;
}

    a:hover {
        color: #085050;
    }

/* Focus outline for accessibility */
*:focus-visible {
    outline: 2px solid #0A5959;
    outline-offset: 2px;
}

/* Grid and list view enhancements */

/* Per-row action button (e.g. print icon) inside DxGrid cell — 44 × 44 px minimum tap target.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height */
.grid-row-action-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dxbl-grid-header {
    background-color: #ececec;
    font-weight: 500;
}

.dxbl-grid-data-row:hover {
    background-color: rgba(10, 89, 89, 0.05);
}

.dxbl-grid-data-row.dxbl-grid-selected {
    background-color: rgba(10, 89, 89, 0.1);
}

/* Pallet Lookup master-detail order sections should size the order grid to its
   actual row count so the items detail starts directly below the final order. */
.accordion-section-wrapper[data-section-id^="Sales Orders"] .xaf-masterdetail-first-pane .grid-content.grid-virtual-scrolling-mode,
.accordion-section-wrapper[data-section-id^="Purchase Orders"] .xaf-masterdetail-first-pane .grid-content.grid-virtual-scrolling-mode {
    min-height: 0 !important;
    height: auto !important;
}

.accordion-section-wrapper[data-section-id^="Sales Orders"] .xaf-masterdetail-container.direction-vertical > .xaf-masterdetail-first-pane,
.accordion-section-wrapper[data-section-id^="Purchase Orders"] .xaf-masterdetail-container.direction-vertical > .xaf-masterdetail-first-pane {
    min-height: 0 !important;
    height: auto !important;
}

.accordion-section-wrapper[data-section-id^="Sales Orders"] .xaf-masterdetail-container.direction-vertical > .xaf-masterdetail-detailview,
.accordion-section-wrapper[data-section-id^="Purchase Orders"] .xaf-masterdetail-container.direction-vertical > .xaf-masterdetail-detailview {
    min-height: 0 !important;
}

/* Navigation menu styling */
.dxbl-navigation-menu-item.active {
    color: #0A5959;
    font-weight: 500;
}

/* Form validation styling */
.is-valid,
.was-validated .form-control:valid {
    border-color: #0A5959;
}

    .is-valid:focus,
    .was-validated .form-control:valid:focus {
        border-color: #0A5959;
        box-shadow: 0 0 0 0.25rem rgba(10, 89, 89, 0.25);
    }

/* Loading indicators */
.dxbl-splash-screen {
    background-color: #fff;
}

/* Modal dialog enhancements */
.modal-header {
    background-color: #ececec;
    border-bottom: 2px solid #0A5959;
}

/* Card component styling */
.card-header {
    background-color: #ececec;
    font-weight: 500;
}

/* Ensure good contrast for text */
.text-primary {
    color: #0A5959 !important;
}

.bg-primary {
    background-color: #060300 !important;
}

.bg-success {
    background-color: #0A5959 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-logo {
        width: 24px;
        height: 20px;
    }
}

/* Dark mode support (if enabled via data-bs-theme attribute) */
[data-bs-theme="dark"] .dxbl-grid-header {
    background-color: #343a40;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .card-header {
    background-color: #343a40;
    border-color: #495057;
}

[data-bs-theme="dark"] a {
    color: #0A5959;
}

    [data-bs-theme="dark"] a:hover {
        color: #0d7070;
    }

/* Accordion tabs and help panel styles */
.pineapple-accordion-tabs {
    width: 100%;
}

.pineapple-accordion-tabs .dxbl-tabs {
    width: 100%;
}

.pineapple-accordion-tabs.dxbl-tabs > .dxbl-tabs-tablist,
.pineapple-accordion-tabs .dxbl-tabs > .dxbl-tabs-tablist {
    position: sticky;
    top: 0;
    z-index: 1025;
    background: var(--dxbl-tabs-bg, var(--bs-body-bg, #fff));
    box-shadow: 0 0.25rem 0.65rem rgba(33, 37, 41, 0.06);
}

.pineapple-accordion-tabs-hidden.dxbl-tabs > .dxbl-tabs-tablist,
.pineapple-accordion-tabs-hidden .dxbl-tabs > .dxbl-tabs-tablist {
    display: none;
}

.pineapple-accordion-tabs-hidden.dxbl-tabs > .dxbl-tabs-content,
.pineapple-accordion-tabs-hidden .dxbl-tabs > .dxbl-tabs-content {
    padding-top: 0;
}

.pineapple-accordion-tab-body,
.pineapple-accordion-help-tab-body {
    padding: 0.5rem 0;
}

.pineapple-accordion-help-topic {
    border: 1px solid rgba(10, 89, 89, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: rgba(10, 89, 89, 0.02);
}

.pineapple-accordion-help-title {
    margin-bottom: 0.5rem;
    color: #0A5959;
}

.pineapple-markdown-help {
    line-height: 1.5;
}

.pineapple-markdown-help h1,
.pineapple-markdown-help h2,
.pineapple-markdown-help h3,
.pineapple-markdown-help h4,
.pineapple-markdown-help h5 {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.pineapple-markdown-help pre {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.75rem;
    overflow: auto;
}

.pineapple-markdown-help code {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
}

.pineapple-markdown-help img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.75rem 0;
    border: 1px solid #d7e0e0;
    border-radius: 6px;
    background: #fff;
}

.pineapple-mermaid-diagram {
    overflow-x: auto;
    padding: 0.25rem;
}

.pineapple-accordion-help-empty {
    color: #6c757d;
    font-style: italic;
}

.pineapple-accordion-tab-section-body {
    padding: 0.75rem 0.5rem;
}

#main-view-content:has(.pineapple-accordion-tabs) .main-content {
    padding-bottom: 6rem;
}

.n2c-domain-action-buttons {
    box-sizing: border-box;
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    border: 1px solid rgba(10, 89, 89, 0.14);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(10, 89, 89, 0.08), rgba(255, 255, 255, 0.96) 42%),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 0.4rem 1.2rem rgba(33, 37, 41, 0.08);
}

.n2c-domain-action-button {
    min-height: 2.5rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.n2c-domain-action-buttons .n2c-accordion-entry-action-reset {
    min-width: 6.75rem;
}

.n2c-domain-action-buttons .n2c-accordion-entry-action-post {
    min-width: 7.75rem;
    box-shadow: 0 0.35rem 1rem rgba(6, 3, 0, 0.18);
}

@media (max-width: 640px) {
    .n2c-domain-action-buttons {
        position: fixed;
        right: 0.35rem;
        bottom: 4.85rem;
        left: 0.35rem;
        z-index: 1030;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.35rem;
        margin: 0;
        padding: 0.3rem;
        min-height: 0;
        max-height: 3rem;
        backdrop-filter: blur(10px);
    }

    .n2c-domain-action-button {
        width: auto;
        min-width: 0;
        min-height: 2.15rem !important;
        max-height: 2.25rem;
        padding-inline: 0.45rem;
        font-size: 0.78rem;
        line-height: 1;
    }

    .n2c-domain-action-buttons .n2c-accordion-entry-action-reset {
        min-width: 0;
        flex: 0 1 36%;
    }

    .n2c-domain-action-buttons .n2c-accordion-entry-action-post {
        min-width: 0;
        flex: 1 1 64%;
    }

    .pineapple-accordion-tab-section-body .n2c-domain-action-buttons {
        position: fixed;
        right: 0.35rem;
        bottom: 8.05rem;
        left: 0.35rem;
        z-index: 1031;
        justify-content: flex-end;
        max-height: 3rem;
    }

    .pineapple-accordion-tab-section-body .n2c-domain-action-button {
        flex: 1 1 100%;
    }

    .pineapple-accordion-tab-section-body {
        padding-bottom: 7rem;
    }
}