/* Shared Action Centre styles (Home + Workspace). Not Blazor-scoped. */

.home2-panel {
    padding: 1rem 1.125rem 0.875rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nx-panel-border-primary);
    border-radius: var(--nx-radius-panel, 6px);
    background: var(--nx-surface-card);
    box-shadow: var(--nx-panel-shadow-primary);
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.home2-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.home2-panel__header-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.home2-panel__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nx-text-heading, var(--mud-palette-text-primary));
}

.home2-panel__title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: var(--nx-radius-pill, 999px);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    background: var(--nx-surface-selected, color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent));
    color: var(--nx-text-secondary, var(--mud-palette-text-secondary));
}

.home2-panel__header-link {
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: none !important;
    white-space: nowrap;
}

.home2-panel__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.home2-panel__filter {
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 999px;
    padding: 0.2rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

.home2-panel__filter:hover {
    background: var(--mud-palette-action-hover);
}

.home2-panel__filter--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.home2-panel__filter--overdue.home2-panel__filter--active {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    color: var(--mud-palette-error);
}

.home2-panel__filter--pending.home2-panel__filter--active {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
    color: var(--mud-palette-info);
}

.home2-panel__filter--today.home2-panel__filter--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    color: var(--mud-palette-primary);
}

.home2-panel__body {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
}

.home2-panel__group {
    min-width: 0;
}

.home2-panel__group-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.4rem 0.125rem 0.3rem;
    margin-bottom: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.home2-panel__group-header--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
}

.home2-panel__group-header--toggle:hover {
    color: var(--mud-palette-text-primary);
}

.home2-panel__group-header--toggle:focus-visible {
    outline: 2px solid var(--nx-border-focus, var(--mud-palette-primary));
    outline-offset: 1px;
}

.home2-panel__group-chevron {
    flex-shrink: 0;
    opacity: 0.55;
    color: var(--mud-palette-text-secondary);
}

.home2-panel__group-header--pending {
    color: var(--mud-palette-info-darken, var(--mud-palette-info));
}

.home2-panel__group-header--overdue {
    color: var(--mud-palette-error);
}

.home2-panel__group-header--today {
    color: var(--mud-palette-primary);
}

.home2-panel__group-header--upcoming {
    color: var(--mud-palette-text-secondary);
}

.home2-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.home2-panel__badge--unclaimed {
    background: var(--nx-icon-secondary-bg, color-mix(in srgb, var(--mud-palette-info) 18%, transparent));
    color: var(--nx-icon-secondary-fg, var(--mud-palette-info));
}

.home2-unclaimed-strip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0.625rem 0.625rem;
    border: 1px solid var(--nx-border-default, color-mix(in srgb, var(--mud-palette-info) 22%, transparent));
    border-radius: var(--nx-radius-medium, var(--nucleus-surface-radius, 8px));
    background: var(--nx-surface-subtle, color-mix(in srgb, var(--mud-palette-info) 8%, transparent));
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.home2-unclaimed-strip:hover {
    background: var(--nx-surface-hover, color-mix(in srgb, var(--mud-palette-info) 14%, transparent));
    border-color: var(--nx-border-hover);
}

.home2-unclaimed-strip__icon {
    flex-shrink: 0;
    color: var(--nx-icon-secondary-fg, var(--mud-palette-info));
}

.home2-unclaimed-strip__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.home2-unclaimed-strip__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home2-unclaimed-strip__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.home2-unclaimed-strip__context {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.home2-unclaimed-strip__action {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

.home2-panel__empty {
    margin: 0;
    padding: 0.5rem 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.home2-panel .home2-work-row,
.home2-panel .workspace-attention-row,
.home2-panel .workspace-desk-row {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.home2-panel .home2-work-overflow {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* List rows — align with .nx-list-row (no nested-card treatment) */
.home2-work-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.5rem 0.35rem;
    border-radius: var(--nx-radius-control, 5px);
    cursor: pointer;
    transition: background-color 120ms ease;
    font: inherit;
    color: inherit;
}

.home2-work-row:hover {
    background: var(--nx-surface-hover);
}

.home2-work-row:focus-visible {
    outline: 2px solid var(--nx-border-focus);
    outline-offset: 1px;
}

.home2-work-row__bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.35rem;
    align-self: flex-start;
}

.home2-work-row__bullet--overdue {
    background: var(--nx-semantic-danger);
}

.home2-work-row__bullet--today {
    background: var(--nx-brand-navy-600);
}

.home2-work-row__bullet--change {
    background: var(--nx-semantic-warning);
}

.home2-work-row__bullet--upcoming {
    background: var(--nx-text-muted);
}

.home2-work-row__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.home2-work-row__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nx-text-heading);
    line-height: 1.35;
}

.home2-work-row__context,
.home2-work-row__detail {
    font-size: 0.75rem;
    color: var(--nx-text-secondary);
    line-height: 1.35;
}

.home2-work-row__status {
    flex-shrink: 0;
    max-width: 34%;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nx-text-secondary);
    line-height: 1.35;
}

.home2-work-row__status--overdue {
    color: var(--nx-semantic-danger);
}

.home2-work-row__status--today {
    color: var(--nx-text-link);
}

.home2-work-row__status--change {
    color: var(--nx-semantic-warning);
}

.home2-work-row__chevron {
    flex-shrink: 0;
    color: var(--nx-text-disabled);
}

.home2-work-overflow {
    display: block;
    margin: 0.25rem 0.375rem 0.125rem;
    padding: 0.25rem 0;
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none !important;
}
