/* Apply the "SAP Fiori" style background to the entire page */
body {
    /* SAP Fiori Quartz Light / Horizon theme background color (Shell background) */
    background-color: #edf2f8;
    /* SAP standard font stack ("72" is the SAP font, with fallbacks) */
    font-family: "72", "72full", "Segoe UI", Helvetica, Arial, sans-serif;
    /* Standard SAP text color */
    color: #32363a;
}

html,
body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

/* Ensure the main layout container doesn't block the background */
.page, .main, .content {
    background-color: transparent !important;
}

.page,
.main,
.content,
main {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.table-responsive,
.ali-grid-container,
.ali-grid-header-wrap,
.ali-grid-body-wrap {
    overscroll-behavior-x: contain;
}

.table-responsive,
.ali-grid-body-wrap {
    touch-action: pan-x pan-y;
}

/* Optional: Make cards stand out with SAP Fiori object page styling */
.card {
    background-color: #ffffff;
    border: 1px solid #d9d9d9; /* Standard SAP border color */
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Very subtle shadow */
}


.card-header {
    padding: 0.45rem 0.7rem;
}

.card-body {
    padding: 0.55rem 0.7rem;
}

/* --- AliGrid SAP Fiori Theme Overrides --- */
/* These rules ensure the Custom Grid matches the Global SAP Theme */

.ali-grid-container {
    background-color: #ffffff;
    border-color: #d9d9d9 !important; /* Sync border with SAP cards */
}

/* Toolbar Styling */
.ali-grid-toolbar {
    background-color: #ffffff !important; /* Match container background */
    border-bottom-color: #d9d9d9 !important;
}

/* Header Styling */
.ali-grid-head th {
    background-color: #f5f7fa !important; /* SAP List Header Background */
    border-color: #d9d9d9 !important;
    color: #48535d !important; /* SAP Label Text Color */
    font-weight: 700;
}

/* Ensure Frozen Headers match the main header */
thead .ali-freeze-left,
thead .ali-freeze-right {
    background-color: #f5f7fa !important;
}

/* Read-only cells blending */
.ali-cell.ali-readonly {
    background-color: #fcfcfc !important; /* Very subtle contrast for read-only */
}


/* =========================
   POPUP (CLEAN - SINGLE BLOCK)
   ========================= */

@keyframes popupIn {
    from {
        transform: translate3d(0, 10px, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.popup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.45);
    /*backdrop-filter: blur(2px);*/
    z-index: 10000;
}

.popup-container {
    position: relative;
    z-index: 10001;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 420px;
    animation: popupIn .18s ease-out;
    /* keep text crisp */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

    /* Kill any CSS-generated "X" inside popup */
    .popup-container::before,
    .popup-container::after,
    .popup-header::before,
    .popup-header::after,
    .popup-body::before,
    .popup-body::after {
        content: none !important;
    }

    /* Hide close icons injected by libraries INSIDE popup */
    .popup-container .btn-close,
    .popup-container .e-dlg-closeicon-btn,
    .popup-container .e-dlg-closeicon,
    .popup-container [class*="close"] {
        display: none !important;
        background-image: none !important;
    }

/* Header */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(16,185,129,.12));
}

    .popup-header h4,
    .popup-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .2px;
    }

/* Close button */
.popup-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    color: rgba(17,24,39,.65);
    transition: background .15s ease, transform .08s ease, color .15s ease;
    position: relative;
    z-index: 10002;
    pointer-events: auto;
}

    .popup-close:hover {
        background: rgba(0,0,0,.06);
        color: rgba(17,24,39,.95);
    }

    .popup-close:active {
        transform: scale(.96);
    }

/* Body */
.popup-body {
    padding: 22px 24px 18px 24px;
    flex-grow: 1;
    overflow: auto;
}

/* Message box */
.popup-message {
    padding: 14px 14px;
    border-radius: 12px;
    background: rgba(37,99,235,.08);
    border: 1px solid rgba(37,99,235,.18);
    color: #0f172a;
    font-size: 16px;
    margin-bottom: 18px;
}

    .popup-message.text-danger {
        background: rgba(239,68,68,.10);
        border-color: rgba(239,68,68,.25);
    }

    .popup-message.text-warning {
        background: rgba(245,158,11,.12);
        border-color: rgba(245,158,11,.28);
    }

    .popup-message.text-info {
        background: rgba(59,130,246,.10);
        border-color: rgba(59,130,246,.25);
    }

    .popup-message.text-success {
        background: rgba(16,185,129,.12);
        border-color: rgba(16,185,129,.25);
    }

/* Buttons / actions */
.popup-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

    .popup-actions .btn {
        padding: 6px 14px;
        font-size: 14px;
        border-radius: 8px;
        min-width: 70px;
    }

        .popup-actions .btn:active {
            transform: translateY(1px);
        }

    .popup-actions .btn-primary {
        box-shadow: none;
    }