/* =============================================================================
   DASHBOARD COMPONENTS
   Layout and styling fixes for dashboard draggable components
   ============================================================================= */

/* Prevent horizontal scrollbar on page-content for dashboard pages */
#page-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Remove right/bottom padding for edge-to-edge layout */
/* Left and top padding are handled automatically by AppShell */
.mantine-AppShell-main {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    /* padding-left: Auto-adjusted by AppShell based on navbar state */
    /* padding-top: Auto-adjusted by AppShell based on header height */
}

/* Constrain width to prevent horizontal overflow while allowing dropdowns */
#draggable-wrapper,
#draggable {
    width: 100% !important;
}

/* Edit mode - clear borders for component manipulation */
.react-grid-item {
    border: 1px solid var(--app-border-color, #ddd) !important;
    border-radius: 4px !important;
    transition: border-color 0.2s ease !important;
}

/* Non-edit mode - clean borderless presentation with subtle shadow */
.drag-handles-hidden .react-grid-item {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}


/* Remove redundant borders from inner content wrapper */
.react-grid-item .dashboard-component-hover,
.react-grid-item [id*="content-box-"] {
    border: none !important;
    box-shadow: none !important;
    padding: 1px !important;
}

/* Remove borders from nested card components */
.react-grid-item .card {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Remove borders from Mantine Card within the component */
.react-grid-item .mantine-Card-root {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Clean up card-body styling */
.react-grid-item .card-body {
    padding: 0px !important;
    border: none !important;
    background-color: transparent !important;
}

/* Ensure content takes full space without additional padding/margins */
.react-grid-item .mantine-Stack-root {
    height: 100% !important;
}

/* Style the action buttons container */
.react-grid-item .mantine-Group-root {
    margin-left: 8px !important;
    margin-bottom: 8px !important;
}

/* Ensure the main content area uses available space efficiently */
.react-grid-item .mantine-Card-root {
    height: 100% !important; /* FIXED: Remove calc(100% - 40px) that breaks vertical growing */
    margin: 0 !important;
    padding: 12px !important;
    /* Add flex properties for proper vertical growing */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Active/selected state for grid items - DMC will handle theming */
.react-grid-item.react-grid-item-dragging {
    border-color: #666 !important;
    border-width: 3px !important;
    box-shadow: 0 4px 16px rgba(102, 102, 102, 0.3) !important;
    background-color: #ffffff !important;
}

.react-grid-item.react-grid-item-resizing {
    border-color: #666 !important;
    border-width: 3px !important;
    box-shadow: 0 4px 16px rgba(102, 102, 102, 0.3) !important;
    background-color: #ffffff !important;
}