/* DEV-1.06A | Work Home Page Shell
 *
 * Page-only owner.
 * Global Sidebar/Header/AppShell remain owned by MH-05/MH-06/MH-07.
 * Dashboard data/content are intentionally NOT implemented here.
 */

.work-home[hidden] {
    display: none !important;
}

.work-home {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr);
    gap: 14px;

    padding: 18px 20px;

    overflow: hidden;
}

.work-home__summary-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.work-home__summary-card {
    min-width: 0;
    min-height: 106px;

    display: grid;
    grid-template-rows:
        auto
        1fr
        auto;
    gap: 3px;

    padding: 14px 15px 12px;

    border: 1px solid #dce7ec;
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(15, 23, 42, 0.045);
}

.work-home__summary-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #536a78;

    font-size: 13px;
    font-weight: 800;
}

.work-home__summary-value {
    align-self: center;

    color: #214f61;

    font-size: 28px;
    font-weight: 850;
    line-height: 1;
}

.work-home__summary-note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #8798a3;

    font-size: 11px;
}

.work-home__info-grid {
    min-height: 0;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    grid-template-rows:
        minmax(0, 1.9fr)
        minmax(0, 0.95fr);
    gap: 14px;
}

/*
 * Final home layout:
 * 27 Work Queue spans the full row.
 * 30 Data Anomaly + 32 System Reminder share the bottom row.
 */
.work-home__panel[data-home-block="27"] {
    grid-column: 1 / -1;
    grid-row: 1;
}

.work-home__panel[data-home-block="30"] {
    grid-column: 1;
    grid-row: 2;
}

.work-home__panel[data-home-block="32"] {
    grid-column: 2;
    grid-row: 2;
}

.work-home__panel {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid #dce7ec;
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(15, 23, 42, 0.045);
}

.work-home__panel-header {
    min-height: 57px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 11px 13px;

    border-bottom: 1px solid #edf2f5;

    background: #fbfcfd;
}

.work-home__panel-header h2 {
    margin: 0;

    color: #24485a;

    font-size: 16px;
    line-height: 1.25;
}

.work-home__panel-meta {
    display: block;
    margin-top: 2px;

    color: #8a9aa5;

    font-size: 11px;
}

.work-home__view-all {
    flex: 0 0 auto;

    padding: 6px 9px;

    border: 1px solid #d7e1e6;
    border-radius: 8px;

    background: #ffffff;
    color: #6b7d88;

    font-size: 11px;
    font-weight: 700;
}

.work-home__view-all:disabled {
    opacity: 0.72;
    cursor: default;
}

.work-home__panel-content {
    min-height: 0;

    padding: 12px;

    overflow: hidden;
}

.work-home__empty {
    height: 100%;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border: 1px dashed #dce5ea;
    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #fbfdfe,
            #f8fafc
        );

    color: #6f838f;

    text-align: center;
}

.work-home__empty-mark {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 3px;

    border-radius: 999px;

    background: #eaf3f5;
    color: #44717d;

    font-size: 12px;
    font-weight: 850;
}

.work-home__empty strong {
    font-size: 13px;
}

.work-home__empty small {
    color: #9aa8b1;
    font-size: 11px;
}

.app-workspace-placeholder {
    padding: 22px 24px;
}

.app-workspace-placeholder h1 {
    margin: 0 0 7px;

    color: #24485a;

    font-size: 22px;
}

.app-workspace-placeholder p {
    margin: 0;

    color: #81929e;
    font-size: 13px;
}

@media (max-width: 1180px) {
    .work-home {
        height: auto;
        min-height: 100%;

        overflow: visible;
    }

    .work-home__summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .work-home__info-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .work-home__panel[data-home-block="27"],
    .work-home__panel[data-home-block="30"],
    .work-home__panel[data-home-block="32"] {
        grid-column: 1;
        grid-row: auto;
    }

    .work-home__panel {
        min-height: 280px;
    }
}

@media (max-width: 760px) {
    .work-home {
        padding: 12px;
    }

    .work-home__summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* DEV-1.10B1 | Home layout containment
 *
 * Dynamic contents in 27/30/32 must NEVER enlarge the Home page.
 * The page shell owns overall height; individual modules own only
 * their internal overflow.
 */

.work-home,
.work-home *,
.work-home *::before,
.work-home *::after {
    box-sizing: border-box;
}

.work-home {
    max-height: 100%;
}

.work-home__summary-grid {
    min-height: 0;
}

.work-home__info-grid {
    height: 100%;
    max-height: 100%;
    min-height: 0;

    overflow: hidden;
}

.work-home__panel {
    height: 100%;
    max-height: 100%;
    min-height: 0;

    overflow: hidden;
}

.work-home__panel-header {
    min-width: 0;
}

.work-home__panel-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* DEV-1.10B2 | Home viewport lock
 *
 * B1 correctly contained module overflow, but the outer AppShell/Workspace
 * height chain could still size itself from Home content and create a browser
 * page scrollbar.
 *
 * Home is a desktop one-screen dashboard. When Home is the visible route:
 * AppShell owns the viewport, Workspace owns the remaining grid cell, and
 * Home fills that cell. Grid tracks—not child content—own 27/30/32 heights.
 */

@media (min-width: 1181px) {
    html:has(#work-home-page:not([hidden])),
    body:has(#work-home-page:not([hidden])) {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    #app-shell:has(#work-home-page:not([hidden])) {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 0;

        overflow: hidden;
    }

    #app-workspace:has(> #work-home-page:not([hidden])) {
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: 100%;

        overflow: hidden;
    }

    #work-home-page:not([hidden]) {
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;

        overflow: hidden;
    }

    /*
     * Let CSS Grid assign the actual track size.
     * Avoid percentage-height chains on children; those can create
     * intrinsic-size feedback and enlarge the outer page.
     */
    #work-home-page:not([hidden])
    .work-home__info-grid {
        height: auto;
        max-height: none;
        min-height: 0;

        overflow: hidden;
    }

    #work-home-page:not([hidden])
    .work-home__panel {
        height: auto;
        max-height: none;
        min-height: 0;

        overflow: hidden;
    }

    #work-home-page:not([hidden])
    .work-home__panel-content {
        height: auto;
        max-height: none;
        min-height: 0;

        overflow: hidden;
    }

    /*
     * These two children are the only scroll owners.
     * They inherit the grid-assigned content box and scroll internally.
     */
    #work-home-page:not([hidden])
    .work-home-queue__table-wrap,
    #work-home-page:not([hidden])
    .work-home-alerts__list {
        min-height: 0;
        max-height: 100%;

        overflow-y: auto;
        overscroll-behavior: contain;
    }
}