/* Action Group Styling */
.action-group {
    display: flex;
    flex-direction: column;
    /* Vertical stacking by default for sticker mode */
    align-items: flex-end;
    gap: 8px;
    /* Spacing between items in a block */
    margin-bottom: 24px;
    /* Spacing between blocks */
}

.action-group:last-child {
    margin-bottom: 0;
}

/* Space wrapper to handle dropdown relative positioning */
.space-wrapper {
    position: relative;
}

/* Ensure sticker input group is inline within flex column if needed, 
   but sticker-input-group is already flex row. 
   We just need to make sure order is correct. */

/* Column View overrides - maybe they should be horizontal?
   The user asked for "blocks" and the image shows a vertical sidebar in sticker mode.
   In column view, usually header actions are horizontal?
   Let's check existing logic.
   Usually implicit row in .header-actions.
   If .header-actions is flex row, action-group should be flex row too? 
   The image showed a vertical sidebar. I will assume vertical for sticker mode.
*/

/* Sticker Mode: Vertical Sidebar */
#dashboardView.sticker-mode .header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    /* Gap handled by action-group margins */
    margin-top: 20px;
    /* Lower entire block by 20px */
}

/* Matrix Mode: Vertical Sidebar */
#dashboardView.matrix-mode .header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin-top: 20px;
    /* Lower entire block by 20px */
}

/* Column Mode: Horizontal Header */
/* If column mode has horizontal header, we need to adjust */
#dashboardView.column-mode .header-actions {
    flex-direction: row;
    align-items: center;
    /* Remove parent gap to use padding for separation */
    gap: 0;
}

#dashboardView.column-mode .action-group {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    gap: 8px;
    position: relative;
    /* For separator */
    padding-left: 38px;
}

/* Add vertical separator line between groups in column mode */
/* Better approach: Border right on the group */
#dashboardView.column-mode .action-group:not(:last-child) {
    /* border-right: 2px solid #999; */
    /* Removed - separator lines */
    /* Darker gray and thicker for visibility */
    padding-right: 1x;
}

/* Adjust padding for the first/last groups if needed */
#dashboardView.column-mode .action-group:first-child {
    padding-left: 0;
}

.column-mode .action-group {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    gap: 8px;
}