/* =============================================================================
   Shift info corner + popover (mw-sfi-*)

   Layout for the shift planner's corner header (drawer button + condensed preview)
   and the "My shift info" popover panel (my shifts + obligations + status list).
   Standalone, prefixed, loaded via Assets["mw-shift-info.css"] in App.razor.
   Mirrors the obligation-progress visual language (mw-sop-*) in mw-shift-rules.css.
   ============================================================================= */

/* --- Corner header: 1 : 3 split (drawer button | preview) ------------------- */

.mw-sfi-corner {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

/* Left quarter: the drawer-toggle button. */
.mw-sfi-corner-drawer {
    flex: 0 0 25%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* When there is no shift-info panel, the button takes the whole corner (legacy look). */
.mw-sfi-corner--solo .mw-sfi-corner-drawer {
    flex: 1 1 100%;
    border-right: none;
}

/* Right three quarters: the clickable preview / popover activator. */
.mw-sfi-corner-menu {
    flex: 1 1 75%;
    min-width: 0;
    display: flex;
}

.mw-sfi-corner-menu .mud-menu-activator {
    flex: 1;
    min-width: 0;
    display: flex;
}

.mw-sfi-corner-activator {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
}

/* --- Condensed preview ------------------------------------------------------ */

.mw-sfi-prev {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 4px;
    padding: 0 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.mw-sfi-prev:hover {
    background: var(--mud-palette-action-default-hover, rgba(127, 127, 127, 0.1));
}

.mw-sfi-prev-stat {
    --c: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.mw-sfi-prev-ic {
    width: 17px !important;
    height: 17px !important;
    font-size: 17px !important;
    flex: none;
}

.mw-sfi-prev-ic--shifts { color: var(--mud-palette-primary); }
.mw-sfi-prev-ic--obl    { color: var(--mud-palette-text-secondary); }
.mw-sfi-prev-ic--alert  { color: var(--c); }
.mw-sfi-prev-ic--ok     { color: var(--mud-palette-success); }

.mw-sfi-prev-val {
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-sfi-prev-val--alert { color: var(--c); }

/* --- Popover panel ---------------------------------------------------------- */

.mw-sfi-panel {
    width: 340px;
    max-width: 92vw;
    max-height: min(72vh, 720px);
    overflow-y: auto;
    padding: 4px;
}

/* --- Status list (mw-sfi-st-*) --------------------------------------------- */

.mw-sfi-st-section {
    margin-top: 10px;
}

.mw-sfi-st-head {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin: 0 2px 6px;
}

.mw-sfi-st-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mw-sfi-st {
    --c: var(--mud-palette-info);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    border-left: 3px solid var(--c);
    background: color-mix(in srgb, var(--c) 9%, transparent);
}

.mw-sfi-st-ic {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    flex: none;
    color: var(--c);
    margin-top: 1px;
}

.mw-sfi-st-msg {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}