/* =========================
    ENTERPRISE LAYOUT MODULE
    enterprise-layout.css
    header, sticky, layout containers
========================= */

html, body {
    height: 100%;
}

:root {
    --nts-page-background: #f4f6f4;
}

/* Content area full height */
#content.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: var(--nts-page-background);
}



/* Prevent double scroll */
.page-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* เฉพาะ Desktop เท่านั้น */
@media (min-width: 900px) {
    .page-grid {
        height: calc(100vh - var(--header-height));
        overflow: hidden;
    }
}

/* Page wrapper */
.page-grid,
.page-form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* =========================
   STICKY SUMMARY HEADER
========================= */
.sticky-summary {
    position: sticky;
    top: 0px;
    z-index: 1020;
    background: #fff;
    border-left: 4px solid #0d6efd;
    backdrop-filter: blur(4px);
}

.sticky-summary.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/*.sticky-summary.status-rec {
    border-left: 5px solid #0dcaf0;
    background: linear-gradient(to right, rgba(13,202,240,0.08), transparent);
}*/

/*.sticky-summary.status-rec {
    border-left: 6px solid #0dcaf0;
    background: linear-gradient(90deg, rgba(13,202,240,0.18) 0%, rgba(13,202,240,0.08) 40%, transparent 100%);
}*/

.sticky-summary.status-new {
    border-left: 5px solid #3b6f9f;
    background: linear-gradient(to right, rgba(59,111,159,0.11), transparent);
}

.sticky-summary.status-rec {
    border-left: 5px solid #557b8d;
    background: linear-gradient(to right, rgba(85,123,141,0.12), transparent);
}

.sticky-summary.status-act {
    border-left: 5px solid #2f7654;
    background: linear-gradient(to right, rgba(47,118,84,0.11), transparent);
}

.sticky-summary.status-ren {
    border-left: 5px solid #a86525;
    background: linear-gradient(to right, rgba(168,101,37,0.12), transparent);
}

.sticky-summary.status-wfc {
    border-left: 5px solid #a1771b;
    background: linear-gradient(to right, rgba(161,119,27,0.12), transparent);
}

.sticky-summary.status-can {
    border-left: 5px solid #963b42;
    background: linear-gradient(to right, rgba(150,59,66,0.12), transparent);
}







.identity-item {
    padding-bottom: 8px;
}

.identity-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    margin-bottom: 2px;
}

.identity-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 4px;
}

/* ---------- GROUP TITLE ---------- */
.menu-group-title {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #94a3b8;
    padding: 5px 16px 4px 16px;
    letter-spacing: 0.6px;
}

/* ---------- Divider ---------- */
.menu-divider {
    height: 1px;
    margin: 10px 10px;
    background: linear-gradient(to right, transparent, #cbd5e1, transparent);
}

/* ---------- Active Highlight ---------- */
.ultra-store .menu-item.active > .menu-link {
    position: relative;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    color: #fff !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

    .ultra-store .menu-item.active > .menu-link::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 4px;
        background: #1d4ed8;
    }

/* ---------- Badge ---------- */
.ultra-badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    margin-left: auto;
    font-weight: 600;
}

    .ultra-badge.primary {
        background: #2563eb;
        color: #fff;
    }

    .ultra-badge.success {
        background: #16a34a;
        color: #fff;
    }

    .ultra-badge.warning {
        background: #f59e0b;
        color: #fff;
    }

    .ultra-badge.info {
        background: #0ea5e9;
        color: #fff;
    }

    .ultra-badge.danger {
        background: #dc2626;
        color: #fff;
    }

/* ---------- Pulse Animation ---------- */
.pulse {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* ---------- Smooth Expand ---------- */
.ultra-submenu {
    transition: all 0.25s ease;
}

/* ---------- Hover Effect ---------- */
.ultra-store .menu-link:hover {
    background: #e0f2fe;
    border-radius: 6px;
}

/* =========================*/